html - 如何根据表格中列的数量应用不同的样式

Question

我有不同的表，它们很相似，但唯一的区别是它们可能有不同的列。 我想定义一种样式，如果列数为 2，则第一个 td 的宽度为 80%，第二个 td 的宽度为 105。如果表格有三列，则它们的宽度应为 45%、45% 和10% 等等。

我如何在 CSS 中做到这一点？如果在 CSS 中做不到，我怎么能在 JQuery 中做呢？

Answer 1

据我所知，这不能仅使用 CSS，因为您需要计算百分比并检测列数。

我设置了a fiddle使用 jQuery 示例，假设每行的列数相同(未使用 colspan)。这是我的做法:

var cols       = $('table tr:first td').size(),
    width      = 90 / cols,
    last_width = 10;

$('table td').css('width', width + "%");
$('table tr > td:last-child').css('width', last_width + "%");
​

使用的变量是列数、最后一列的大小和其他列的大小(列数占宽度的 90%)。然后我们将结果宽度应用于所有单元格，并将最后一列宽度应用于每行的最后一个单元格。