使用 CSS 设置不同宽度的表格列样式答案

【问题标题】：Style Table Columns at different widths using CSS使用 CSS 设置不同宽度的表格列样式
【发布时间】：2013-01-18 17:45:21
【问题描述】：

我需要将中间列设置为 100%。 css 在下面正常工作，除非我将列宽更改为 100%，然后它会删除其他列的所有宽度。有人知道为什么吗？

.SummaryTable td:first-child
{
    width: 150px;
}
.SummaryTable td:first-child + td
{
    width: 150px; /*100% will remove other col widths*/
}
.SummaryTable td:first-child + td + td
{
    width: 175%;
}

这里是fiddle

【问题讨论】：

你应该加个小提琴。
将中间的一个设置为 100% 意味着它会占用整个空间 - 您还为其他单元格留出多少空间？你想达到什么目的？
表格宽度设置为 100% 以填充 Div。然后我希望固定第 1 列和第 3 列，而第 2 列填充剩余区域。我只是回答了我自己的问题。我从第二列中删除了宽度样式，现在它可以正常工作了。
注意：当我将中间列设置为 100% 时，第一列和最后一列的宽度将调整为单元格的内容。

标签： asp.net css web-applications

【解决方案1】：

如果表格的宽度=100%，不设置中间单元格的宽度应该会为您解决。

其他单元格将被固定，但未指定宽度的单元格将填满屏幕。

试试这个，我认为它应该可以工作

.SummaryTable td:first-child
{
    width: 150px;
}
.SummaryTable td:first-child + td
{
   /* don't set any width for the middle cell, it would expand */
}
.SummaryTable td:first-child + td + td
{
    width: 150px;
}

【讨论】：

【解决方案2】：

给整个表格一个特定的宽度：

.SummaryTable {width: 100%}

然后从第二列中删除宽度，使其填充第一列和第三列从总宽度中剩下的剩余宽度。

【讨论】：

【解决方案3】：

如果我是你，我不会使用 css :child，它不会在旧版本的 IE 上工作。 (IE8,IE7..)。

你最好使用jquery，你可以试试：

$('.SummaryTable td:nth-child(2)').css({width: '100%'})

或者你可以使用:eq:

$('.SummaryTable td:eq(1)').css({width: '100%'})

请注意，当您使用:eq 时，计数器从 0 开始，因此 1 是第二个位置。

【讨论】：