Question

我无法相信这让我很难过。

我有一张宽度为100％的桌子。我有列，其中一些列的宽度已定义。我的表中有两种类型的行。有些总是可见的，有些会在点击它们上面的行时出现。

HTML：

<table border="1" style="width: 100%;">
    <tr class="a">
        <td colspan="2" style="width: 50px">
            A
        </td>
        <td style="width: 40px">
            A
        </td>
        <td>
            A
        </td>
    </tr>
    <tr class="b">
        <td>
            A
        </td>
        <td style="width: 10px;">
            A
        </td>
        <td>
            A
        </td>
        <td>
            A
        </td>
    </tr>
</table>

JS：

$(function(){
    $(".b").hide();

    $(".a").click(function(){
        $(".b").toggle();
    })
})

这是一个JSFiddle：

http://jsfiddle.net/9hnp9Lxf/

它不会更简单......但我无法理解为什么这不会按照我想要的方式行事。

有人可以提出建议吗？

Answer 1

如果您希望表格列符合CSS设置的宽度，您可以定义fixed table layout：

table {
    table-layout: fixed;
}

演示：http://jsfiddle.net/9hnp9Lxf/2/

Answer 2

您可以使用＆＃34; colgroup＆＃34;和＆＃34; col＆＃34;用于定义表结构的标记。那么你将不会遇到这个问题，因为结构将由这些标签修复。例如：

  <colgroup>
    <col span="2" style="width:50px" >
    <col style="width:30px">
  </colgroup>

Answer 3

这是因为表格始终保持其结构，具体取决于其中的列数和数据。您可以从以下几点简要总结您遇到此问题的原因： -

首先，第一行中有三列。
其次，第二行有四列。
第三，td的宽度各不相同（我在谈论同一td中的columns。

要维护tr-td结构，Table会自行调整。在您的情况下，当您单击第一行时，第二行有四列（4 td s）打开，调整前一个tr。前两个td的第二行在第一行的第一个td下面。尝试在第二行添加更多列，您将相应地看到更改，但表结构不会受到干扰。它将始终保持100％。

table-layout:fixed将解决您的问题，但在每种情况下都不是一个好的做法。它不适用于跨浏览器。此外，您不希望宽度在toggle上进行更改，table-layout:fixed将无法解决您的问题。

当切换行时，列宽会改变（在具有100％宽度的表格上）

3 个答案:

演示：http://jsfiddle.net/9hnp9Lxf/2/