Javascript“表格宽度”正在更改“ Tbody宽度”

Question

I made a javascript to change many tables width according to the amount of text inside each tables.

---

But my problem is javascript is changing the width of tbody (saw in browser inspect element) not the table width, that's why there is a unnecessary white-space (red color) after the the table (i think because of my bad coding or while loop), please see this fiddle and scroll to the right: http://jsfiddle.net/p9edr8e9/1/ Where is my mistake and how it change width of whole table?

Thanks!

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; }

Please remove the display: block; assignment to display the table as what it is: a table. Then you ar going to be fine.