Question

是否可以为特定类的表定义列并重用它？

例如，我在页面上有两个表格，我希望它们的列对齐，所以目前它们都有类似的定义：

<table class='grid'>
    <col class='col-name' />
    <col class="col-access-type" />
    <col class="col-auto-grant" />
    <col class="col-auto-revoke" />
    <col class="col-can-assign" />
    <col class="col-actions" />

但理想情况下我想重新使用col标签，只需在CSS中定义一次，这样我就可以写：

<table class='grid'>

并在CSS中：

table.grid
{
 columns: {erm ok so what is it?}
}

这可能吗？

Answer 1

在我看来，你正在寻找的答案是CSS3 s nth-of-type（）`选择器。

这可以让你做这样的事情：

table.grid td:nth-of-type(1) { .... }
table.grid td:nth-of-type(2) { .... }
table.grid td:nth-of-type(3) { .... }

等

然而，这个问题的主要问题是它在IE8或更低版本中不受支持，因此除非您的用户人口统计与常规完全不同，否则您将无法使用它。

我不知道任何其他解决方案可以避免重复列结构。遗憾。

[编辑]

实际上，在这种情况下，nth-of-type()可能会优于nth-child()。

有关浏览器兼容性图表的信息，请参阅http://www.quirksmode.org/css/contents.html;有关使用情况，请参阅http://www.quirksmode.org/css/nthchild.html（包括nth-of-type和nth-child）

Answer 2

您可以使用一些jQuery脚本来执行此操作，因此对于具有grid类的每个表，如果将所需的类应用于cols，例如

$(function() {
    $("table.grid col:eq(0)").addClass("col-name");
    $("table.grid col:eq(1)").addClass("col-access-type");
    // etc.
});

你能在CSS中定义标签（带有类）并将它们应用到多个表中吗？

2 个答案: