繁体   English   中英

使用CSS,如何设置单个单元格或单个列的格式?

[英]Using CSS, how do I set the formatting of just a single cell or a single column?

使用CSS,如何设置单个单元格或单个列的格式?

使用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 class属性应用于标记,则可以设置多个匹配元素的样式,如下所示:

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

除非它在页面上出现多次,否则不要使用CLASS

给单元格一个类名,并设置类的样式。

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

.cellClass { color: #a9a9a9 }

检出HTML <col><colgroup>标记,它们使您可以一次将格式应用于整个列或相邻的列组。

您可以设置适用的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>

给单元格/列一个类或ID,并使用CSS将格式应用于该单元格/列

对于表格单元格,您需要为其提供某种标识符,以便您可以对其进行引用。 根据您的需要,它可以是类或ID。

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

然后,您可以在CSS中应用不同的格式:

.specialCell { color: red; }

如果要对列应用不同的样式,则有<col>标记,但是浏览器支持受到限制。 您最好手动(或使用Javascript)将该类应用于所有元素

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

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

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

也许可以解决您的问题?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM