Question

使用CSS，如何设置单个单元格或单个列的格式？

Answer 1

使用ID选择器仅定位页面的一个元素，在本例中为表格单元格：

 <tr>
  <td id="foo"></td>
 </tr>

然后在CSS中：

#foo
{
 //-- CSS styling goes here just for this element only
}

该哈希符号（#）将该名称选择器标记为属于id。您可以在样式表中进一步将其锁定，以仅应用于具有该ID的TD单元格，如下所示：

td#foo
{
 //-- CSS styling goes here just for this element only
}

如果您将rowspan属性添加到TD，您就可以将其转换为列并保留您可能已设置的样式。

<td id="foo" rowspan="3"></td>

如果使用前一句（。）标记CSS选择器名称，请执行以下操作：

.foo
{
  //-- CSS styles
}

将定位HTML中的class个选择器，如果将CSS类属性应用于标记，则可以设置多个匹配元素的样式，如下所示：

 <tr>
  <td class="foo"></td>
  <td class="foo"></td>
  <td class="foo"></td>
 </tr>

请勿使用CLASS，除非它在页面上出现多次。

Answer 2

为单元格命名并为该类设置样式。

<td class="cellClass">test</td>

.cellClass { color: #a9a9a9 }

Answer 3

查看HTML <col>和<colgroup>标记，这些标记允许您一次将格式应用于整个列或相邻的列组。

Answer 4

您可以设置适用的COLGROUP样式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            #special { background:yellow }
        </style>
    </head>
    <body>
        <table>
            <colgroup></colgroup>
            <colgroup id="special"></colgroup>
            <tr>
                <td>a</td>
                <td>1</td>
            </tr>
            <tr>
                <td>b</td>
                <td>2</td>
            </tr>
        </table>
    </body>
</html>

Answer 5

为单元格/列提供类或ID，并使用css将格式应用于

Answer 6

对于表格单元格，您需要为其提供某种标识符，以便您可以引用它。根据您的需要，这将是一个类或一个id。

<td class="specialCell">...</td>

在CSS中，您可以应用不同的格式：

.specialCell { color: red; }

如果要对列应用不同的样式，则有<col>标记，但浏览器支持有限。您可能最好手动（或使用Javascript）将该类应用于所有元素

Answer 7

您可以为列分配两个名称。前

<div class="foo"></div>
<div class="foo bar"></div>
<div class="foo"></div>

div.foo { color: #fff; }
div.bar { background-color: green; }

也许这可以解决你的问题？

使用CSS，如何设置单个单元格或单个列的格式？

7 个答案: