unify page

components/QuestionChoice.vue

@@ -1,14 +1,10 @@
 <template>
-    <table class="emphased">
-        <tbody>
-            <tr>
-                <td v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index">
-                    <input type="radio" :value="val" :name="String(questionId)">
-                    <label :for="`${questionId}-${val}`">{{ val }}</label>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="emphased">
+        <div v-for="(val, index) in values" :id="`${questionId}-${val}`" :key="index">
+            <input type="radio" :value="val" :name="String(questionId)">
+            <label :for="`${questionId}-${val}`">{{ val }}</label>
+        </div>
+    </div>
 </template>
 
 
@@ -25,16 +21,27 @@ const { values = ["Très bien", "Bien", "Passable", "Insuffisant", "À rejeter"]
 
 <style scoped="true" lang="css">
 .emphased {
-    border: 1px solid #444;
-    padding: 1em;
+    position: relative;
     margin-top: 2em;
     margin-bottom: 2em;
-    table-layout: fixed;
     width: 100%;
     border-collapse: collapse;
+    display: inline-flex;
+    flex-wrap: nowrap;
 }
 
-.emphased td {
-    border: 1px solid;
+.emphased div {
+    padding: 3px;
+    border: 1px solid #444;
+    border-right: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex: 1 1 0;
+    width: 0;
+}
+
+.emphased div:last-child {
+    border-right: 1px solid #444;
 }
 </style>