jquery - 切换行时，列宽会发生变化(在宽度为 100% 的表格上)

Question

我不敢相信这让我难住了。

我有一个宽度为 100% 的表格。 我有一些列，其中一些已经定义了宽度。 我的 table 上有两种类型的行。有些始终可见，有些在单击其上方的行时出现。

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

您可以使用“colgroup”和“col”标签来定义表结构。那么您将不会遇到这个问题，因为结构将由这些标签固定。例如:

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