From 9ec6d565185d8fe8447c23832a9a9a0c82548671 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sun, 3 Nov 2019 22:32:32 +0100
Subject: [PATCH] Updated template markup

---
 src/components/DataTable.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 8fe8461..54aba1c 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -8,16 +8,13 @@
       </tr>
     </thead>
     <tbody>
-      <template v-for="tuple in dataset.data">
-        <tr :key="tuple[0]">
-          <template v-for="item in tuple">
-            <td :key="item">{{ item }}</td>
-            <template v-if="isHexValue(item)">
-              <td :key="item" :style="'background-color:'+item"></td>
-            </template>
-          </template>
-        </tr>
-      </template>
+      <tr v-for="tuple in dataset.data" :key="tuple">
+        <template v-for="(item, index) in tuple">
+          <td :key="item" v-if="index===1 && !isHexValue(item)" colspan="2">{{ item }}</td>
+          <td :key="item" v-else>{{ item }}</td>
+          <td :key="item" v-if="isHexValue(item)" :style="'background-color:'+item"></td>
+        </template>
+      </tr>
     </tbody>
   </table>
 </template>
@@ -39,6 +36,7 @@ export default {
 <style lang="scss" scoped>
 table {
   border-collapse: collapse;
+  width: 100%;
 
   th,
   td {