Question

如果我有以下表结构：

<table cellpadding="0" cellspacing="0" border="0" width=100%>
<tr>
    <th>
    </th>
    <th>
    Col Header 1
    </th>
    <th>
    Col Header 2
    </th>
    <th>
    Col Header 3
    </th>
</tr>
<tr>
    <th>
    Row Header
    </th>
    <td>
    cell 1
    </td>
    <td>
    cell 2
    </td>
    <td>
    cell 3
    </td>
</tr>
</table>

如何使所有TD的宽度相同？请注意我的行开头有TH。如果需要，我可以使用jQuery。

编辑：

根据以下建议，我开始更倾向于jQuery解决方案。基本上我需要做的是：

获取TABLE的宽度
在ROW开头获得TH的宽度
从＃1
除以TD的数量

我认为这有点令人费解，但应该做好...

Answer 1

有没有理由不能使用CSS？

td {
    width: 300px;
}

如果你想让所有TD：s 和 TH：s的宽度相同，只需在TH上设置宽度：

th {
    width: 300px;
}

TD：s将从列中获得它们的宽度，并且列将从TH：s得到它的宽度。

编辑：对您的问题进行编辑可以更加轻松地了解您要执行的操作：）

对于兼容的浏览器，我肯定会考虑使用CSS Flexible Box Model（flexbox）。 http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

您可以使用Modernizr检查Flexbox兼容性：http://www.modernizr.com/

由于使用javascript执行所需的代码可能会出现混乱，我还会考虑启用较少的浏览器是否需要此功能。

虽然不是在javascript中实现它，但根本不可能。

如果表中的数据在加载后是静态的，那么抓住表格和第一列的宽度应该非常简单，并将剩余部分拆分到其余列上。

如果在初始加载后表格的内容可能会发生变化，则需要理清如何检查更改并每次重新应用新样式。您可能会放置一些事件侦听器，但您需要监听哪些事件取决于哪些操作可能会更改表的内容...

另外，请记住，用户可能会缩放网页的文本。这可能会破坏列的宽度，我猜......

Answer 2

你可以用css做到这一点如果你需要它们，你应该添加th。像

这样的东西

table tr td
{
    width: 400px;
}

或者，使用jquery

$('table tr td').each(function() {$(this).css('width','400px');});

或修改（由阿德里安）

$('table tr td').css('width','400px');

Answer 3

当您知道表格的像素宽度时，更容易设置td宽度的样式。

例如，如果width = 300px然后每个td可以设置为100px。

但是，如果您的表格必须为width = 100%，那么您可以将每个td的宽度设置为33％。

如果padding上有margins，borders或table，则会影响td的宽度。

Answer 4

以百分比形式设置宽度：

td, th { width: 33%; }

使所有单元格的宽度相同（使用jQuery？）

4 个答案: