CSS如何通过id为表格创建CSS？

Question

我不太确定如何解决这个问题，所以我希望我可以在下面举例说明。

我的页面中基本上有一些表格。对于每个表，我想要一个不同的 CSS 类。我在编写 css 方面非常陌生，所以我不知道怎么说我希望 tableA 宽度为 70%，tableB 宽度为 60px。为了使其更复杂，我有两个不同的列，其 iD 分别为 columnA 和 ColumnB。我希望 A 列文本的样式与 b 列不同。下面是我的 html，有人可以发布一个如何指定表类的快速示例吗？

我真的希望这一切都在我的 css 文件中处理，而不是在表内声明每种样式。这些表格是动态的。

<table id="tableA">
        <tr>
            <td id="columnA">
            I want arial font here
            </td>
            <td id="columnB">
            </td>
        </tr>
    </table>

        <table id="tableB">
        <tr>
            <td id="columnC">
            This should just be bold
            </td>
            <td id="ColumnD">
            </td>
        </tr>
    </table>

Answer 1

在单个动态呈现的页面中不能多次使用 ID，但可以多次使用 Class。 您可以定位表数据 ( <td> )，忽略每列中的 ID。

#tableA tr td:nth-child(1) {
    font-family: arial
}
#tableA tr td:nth-child(2) {
    font-sytle: bold;
}
#tableB tr td:nth-child(1){
   font-weight: bold;
}
#tableB tr td:nth-child(2){
   font-family: arial;
}
#tableB tr td:nth-child(3){
   font-weight : bold
}

您甚至可以像这样定位每隔一列

#tableA tr td:nth-child(2n){
   font-weight : bold
}