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

以下是fiddle

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

使用CSS在不同宽度的样式表列

3 个答案: