Question

我有两个不同的表，一个用于标题数据，另一个用于可滚动的主体。

<div class="form-horizontal" style="margin-top:15px;">
    <table id="header">
        <thead>
            <tr>
                <th></th>
                ...8x
            </tr>
        </thead>
    </table>
    <div id="table-container" style="overflow-y:auto; max-height:150px;">
    <table class="table" id="table">
        <tbody>
                <tr>
                    <td ></td>
                    ...8x
                </tr>
        </tbody>
    </table>
    </div>
</div>

现在我想用JQuery设置表的宽度。

$('#table td:nth-child(1)').width('8%');
$('#table td:nth-child(2)').width('8%');
$('#table td:nth-child(3)').width('8%');
$('#table td:nth-child(4)').width('0%');
$('#table td:nth-child(5)').width('8%');
$('#table td:nth-child(6)').width('8%');
$('#table td:nth-child(7)').width('23%');
$('#table td:nth-child(8)').width('23%');
$('#header th:nth-child(1)').width('8%');
$('#header th:nth-child(2)').width('8%');
$('#header th:nth-child(3)').width('8%');
$('#header th:nth-child(4)').width('0%');
$('#header th:nth-child(5)').width('8%');
$('#header th:nth-child(6)').width('8%');
$('#header th:nth-child(7)').width('23%');
$('#header th:nth-child(8)').width('23%');

启动项目时，标题呈现为（示例第一列）：

<th style="width: 10%;"></th>

（预期宽度：8％）

并且正文被渲染为（例如第一列）：

<td style="width: 16%;"></td>

（预期宽度：8％）

因此布局不匹配。为什么渲染输出与预期输出不同？

（关闭问题，我通过使用JQuery将td设置为与th相同的宽度来修复probelem：

var ths = $('#header').children('thead').children('tr').children('th').length;
    for (counter = ths; counter >= 0; counter--) {
        var headerwidht = $('#header th:nth-child(' + counter + ')').width();
        $('#table td:nth-child(' + counter + ')').width(headerwidht + 'px');
    }

但我仍然很好奇为什么表会出乎意料地呈现。）

Answer 1

你的两张桌子都有css“table-layout：fixed”吗？当您为具有百分比的表格的td / th设置宽度时，您应该拥有它。

顺便说一下，由于总宽度百分比的总和不需要等于100％，你应该使用JS为你的表切换一个类，而不改变它们的宽度。基于该类，您可以使用CSS来显示/隐藏您想要的列，甚至可以根据需要更改保留列的宽度。

希望这可以提供帮助。

Answer 2

经过数小时的搜索后，我使用.css('width' '*%')代替.width('*%')修复了问题这解决了这个问题。

查看第一列的代码：

$('#header th:nth-child(1)').css('width', '6%');

现在返回：

<th style="width: 6%;"></th>

我不知道为什么这可以解决问题，但它解决了问题

表头和可滚动表未完全呈现

2 个答案: