Question

我根据每个表格中的文本数量制作了一个javascript来更改多个表格宽度。

但我的问题是javascript正在改变tbody的宽度（在浏览器检查元素中看到）而不是表格宽度，这就是为什么桌子后面有一个不必要的空白（红色）（我认为）因为我的编码不好或在循环中），请看到这个小提琴并滚动到右边：here 我的错误在哪里以及它如何改变整个桌子的宽度？

谢谢！

使用Javascript：

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

CSS：

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

HTML：

{{1}}

Answer 1

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

请删除display: block;分配以显示表格：表格。那你就没事了。

Javascript＆＃34;表格宽度＆＃34;正在改变＆＃34; Tbody Width＆＃34;

1 个答案: