Layout improvements

main.html

@@ -24,8 +24,8 @@
     <table class="listbox">
       <thead>
         <tr>
-          <th style="width:30%">Trait</th>
+          <th style="width:25%">Trait</th>
-          <th style="width:70%" >Value</th>
+          <th >Value</th>
         </tr>
       </thead>
       <tbody id="Traits">
@@ -46,28 +46,25 @@
           <td key="Level">1</td>
         </tr>
       </tbody>
+
+      <thead class="mid">
+        <tr>
+          <th>Stat</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody id="Stats">
+        <tr><td>STR</td><td key="STR">18</td></tr>
+        <tr><td>CON</td><td key="CON">14</td></tr>
+        <tr><td>DEX</td><td key="DEX">9</td></tr>
+        <tr><td>INT</td><td key="INT">12</td></tr>
+        <tr><td>WIS</td><td key="WIS">44</td></tr>
+        <tr><td>CHA</td><td key="CHA">12</td></tr>
+        <tr><td>HP Max</td><td key="HP Max">343</td></tr>
+        <tr><td>MP Max</td><td key="MP Max">6564</td></tr>
+      </tbody>
     </table>
     
-  <div class="vbox">
-    <table class="listbox" id="Stats" rows="8">
-      <tr>
-        <th  style="width:30%">Stat</th>
-        <th  style="width:70%">Value</th>
-      </tr>
-      <tr><td>STR</td><td key="STR">18</td></tr>
-      <tr><td>CON</td><td key="CON">14</td></tr>
-      <tr><td>DEX</td><td key="DEX">9</td></tr>
-      <tr><td>INT</td><td key="INT">12</td></tr>
-      <tr><td>WIS</td><td key="WIS">44</td></tr>
-      <tr><td>CHA</td><td key="CHA">12</td></tr>
-      <tr><td>HP Max</td><td key="HP Max">343</td></tr>
-      <tr><td>MP Max</td><td key="MP Max">6564</td></tr>
-    </table>
-
-  </div>
-
-
-
     <span class="label" >Experience</span>
     <div class="progress-container" id="ExpBar">
       <div class="bar" style="width: 50%"></div>

pq.css

@@ -65,6 +65,10 @@ th:first-child {
   border-right: solid 1px grey;
 }
 
+thead.mid { 
+  border-top: solid 1px grey;
+}
+
 .listbox { 
   border: solid 1px black;
   width: 250px;