使所有细胞相同的宽度（与jQuery？）

如果我有以下表结构：使所有细胞相同的宽度（与jQuery？）

<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的解决方案。基本上，我需要做的是：

获取表
的宽度从1号
鸿沟其余获取TH的宽度在行的开头
减去＃2达阵

我认为这是一个有点令人费解，但应该做的工作的数...

来源

2011-05-16 santa

啊，有一两件事只是打我。您是否在问如何根据内容让列的宽度有所不同，但将所有列的宽度设置为与最宽的宽度相同？因为这将是一个完全不同的问题，而我们迄今为止所有的答案都是这样......而且，这会比较困难...... – 2011-05-16 16:49:36

有没有你不能使用CSS的理由？

td { 
    width: 300px; 
}

如果希望所有TD：■和 TH：s到具有相同的宽度，只需设置宽度上TH代替：

th { 
    width: 300px; 
}

的TD：■将得到他们的宽度从列中，列将从TH：s获得宽度。

编辑：编辑您的问题使得它更容易理解你想要做什么:)

我肯定会考虑与CSS灵活盒模型（Flexbox的）用于兼容的浏览器这样做。 http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

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

由于做你想做的与所需的JavaScript代码的可能的混乱，我也会考虑是否较少功能的浏览器真的需要这个功能与否。

不，这是不可能实现它在JavaScript虽然，一点都没有。

如果静态加载后在表中的数据，它应该是相当直截了当抢表第一列的宽度，并在列的其余部分分割剩余。

如果表中的内容可能会被然而最初加载后更改，您将需要理清如何检查更改，每次重新申请新的风格。你可能会放置一些事件监听器，但哪些事件需要监听取决于什么样的行动可能会改变表的内容...

另外请记住，用户可以缩放网页的文本。这可能弄乱列的宽度也一样，我猜...

来源

2011-05-16 16:41:20

只是一个想法，因为他使用的是侧面（而不是顶部），不会只对齐第一列 – Ben 2011-05-16 16:44:23

他在上面使用TH：s。查看第一个TR的内容。否则，你会是对的，是的。 – 2011-05-16 16:47:11

我不知道桌子可能是什么。 – santa 2011-05-16 16:47:57

你可以只用CSS做。
如果你需要它们，你应该加上th。喜欢的东西

table tr td 
{ 
    width: 400px; 
}

或者，使用jQuery

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

或修订（阿德里安）

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

来源

2011-05-16 16:41:31 Ben

您不需要调用.each（） - $（'table tr td'）。css（'width'，'400px'）;会做同样的事情。 – 2011-05-16 16:45:35

旧习惯，很高兴知道。 – Ben 2011-05-16 16:49:03

当你知道该表的像素宽度它更容易风格td宽度。

例如，如果width = 300px那么每个td的样式可以为100px。

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

如果你有padding，margins，或borders上table，这些都会影响td的宽度。

来源

2011-05-16 16:45:35

设置宽度百分比：

td, th { width: 33%; }

来源

2011-05-16 17:04:58

使所有细胞相同的宽度（与jQuery？）

回答

相关问题