Javascript «Ширина таблицы» меняет «Ширина тела»

Question

Я сделал javascript, чтобы изменить ширину таблиц в соответствии с количеством текста внутри каждой таблицы.

---

Но моя проблема Javascript изменяет ширину TBODY (видели в браузере инспектировать элемент) не ширина таблицы, поэтому есть ненужное белое пространство (красный цвет) после таблицы (я думаю, из-за моего плохого кодирования или цикла while), см. эту скрипку и прокрутите направо: http://jsfiddle.net/p9edr8e9/1/ Где моя ошибка и как она меняет ширину всей таблицы?

Спасибо!

Javascript:

var table = document.getElementsByClassName("tabwid"); 
for (var i = 0; i < table.length; i++) { 
    var j = 0, 
     row; 
    tabwid = table[i].offsetWidth; 
    row = table[i].rows; 
    while (row[j++]) { 
     var hei = row.offsetHeight; 
     while (tabwid < 4000) { 
      tabwid += 500; 
      table[i].style.width = tabwid + 'px'; 
      if (row.offsetHeight == hei) { 
       table[i].style.width = tabwid - 500 + 'px'; 
       break; 
      } 
     } 
    } 
} 

CSS:

.table{ overflow-x:auto; line-height:1.4em;} 
table{ border-collapse:collapse; display:block; background:#ffaaaa; } 
tbody{ background:#aaffaa; } 
th{ text-align:center; vertical-align:top; background:#222; color:#eee; padding:16px 8px; font-weight:normal; } 
td{ padding:8px; border:1px solid #aaa; } 

HTML:

<div class="table"> 

<table class="tabwid"> 
    <tbody> 
     <tr> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
      <th>HHH HHH HHH HHH</th> 
     </tr> 
     <tr> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
      <td>AAA AAA AAA AAA</td> 
     </tr> 
       <tr> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
      <td>BBB BBB BBB BBB</td> 
     </tr> 
       <tr> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
      <td>CCC CCC CCC CCC</td> 
     </tr> 
       <tr> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
      <td>DDD DDD DDD DDD</td> 
     </tr> 
    </tbody> 
</table> 

</div> 

Answer 1

table{ border-collapse:collapse; display:block; background:#ffaaaa; } 

Пожалуйста, удалите display: block; задание, чтобы отобразить таблицу, что это: таблица , Тогда все будет хорошо.