Question

我不确定如何处理这个问题，所以我希望我能在下面举例说明。

我的页面基本上有一些表格。对于每个表我想要一个不同的CSS类。我是非常擅长写css所以我不知道怎么说我希望tableA宽度为70％而tableB宽度为60px。为了使它更复杂，我有两个不同的列，其中包含columnA和ColumnB的iD。我希望columnA文本的样式与列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

没有CSS类。类概念是一个HTML概念，CSS只有类选择器 - 除非HTML标记具有class属性，否则不能使用它们。在这里，您不需要类选择器，因为您可以使用id选择器，例如#tableA。问题中描述的示例样式可以如下实现（添加边框只是为了显示表的宽度）：

＆＃13;

#tableA { width: 70%; }
#tableB { width: 60px; }
#columnA { font-family: Arial; }
#columnC { font-weight: bold; }
table { border: solid; }

＆＃13;

<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>

＆＃13;

但是，如果您确实想要设置列（包含多个单元格）的样式，则需要使用不同的技术 - id列的单元格的id属性都列在{{ 1}}规则的属性，或更明智的class属性，它们和类选择器，或更高级的CSS选择器，如td:nth-child(2)，即使没有{{1}，您也可以在列中设置单元格样式}或id属性。但是如果您遇到这样的问题以及它们的一些问题，请提出一个新问题。

Answer 2

这可以提供帮助：

<head>
<style>
#columnA
{
  font-family: arial;
}
#columnC
{
  font-style: bold;
}
</style>
</head>

Answer 3

您不能在单个动态呈现的页面中多次使用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
}

Answer 4

做css时你应该远离id。类定义如下：
<table class="my-class-name">Content</table>

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

4 个答案: