asp.net - 使用 CSS 设置不同宽度的表格列样式

Question

我需要将中间列设置为 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%;
}

这是小提琴

Answer 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;
}

Answer 2

给总表一个特定的宽度：

.SummaryTable {width: 100%}

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

Answer 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 是第二个位置。