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

Question

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

我怎样才能在 CSS 中做到这一点？如果在 CSS 中无法做到这一点，我该如何在 JQuery 中做到这一点？

Answer 1

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

我用一个 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%）。然后我们将得到的宽度应用于所有单元格，并将最后一列宽度应用于每行的最后一个单元格。