为单个表格单元格设置样式

Posted

技术标签:

【中文标题】为单个表格单元格设置样式【英文标题】:Styling a single table cell 【发布时间】:2011-10-22 11:46:06 【问题描述】:

我在时遇到问题。这是说明我的问题的示例代码:

<style>
#bltable  border-collapse:collapse; width:575px;
    -moz-user-select:none;
#bltable tr.row1 background-color:#eff3f7;
#bltable tr.row2 background-color:#ffffff;
#bltable tr.fotm td background-color:#ffffd9;
#bltable td.op td background-color:#f2f2c3;
</style>
<table id="bloodlines">
    <tr class="row1">
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
        <tr class="row2">
        <td>sup</td>
        <td>sup</td>
        <td class="op">sup</td>
        <td>sup</td>
    </tr>
    <tr class="fotm">
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
    </tr>
</table>

如您所见,表格有两种主要颜色(row1 和 row2),它们会改变每一行(棋盘样式)。 该表还有一个带有额外第三种颜色的“本月风味”行。 最后,表格有一个 td class="op" 将是第四种颜色。

我遇到的问题是 row1、row2 和 fotm 类覆盖了“op”类颜色,并且未显示第四种颜色。我可以用不同的方式编写它以使其正常工作吗?

我试过了:

#bltable tr.row1 

(最后没有“td”)但是我根本没有得到行颜色,因为“X不是继承的。它应用于封闭标签”

此外,我不确定是否有必要在末尾添加额外的“td”

#bltable td.op td 

鉴于 td.op 应该照顾那部分..原则上不应该只是

.op 

够了吗?

有什么想法吗?

【问题讨论】:

【参考方案1】:

你需要在你的css中改变这一行

#bltable td.op td background-color:#f2f2c3;

到这里

#bltable tr td.op background-color:#f2f2c3;

您有两个 tds 和第一个 .op

示例:http://jsfiddle.net/jasongennaro/LdSM3/

【讨论】:

非常感谢。解决了我的问题 我很高兴@techii。如果这回答了您的问题,您可以点击复选标记让其他人知道。【参考方案2】:

你的规则是错误的。应该是:

#bltable td.op background-color:#f2f2c3;

#bltable tr td.op background-color:#f2f2c3;

【讨论】:

感谢您的帮助。非常感谢。【参考方案3】:

你必须使用这个:

bltable td.op background-color:#f2f2c3;

你说得对,额外的“td”不是必需的。

【讨论】:

【参考方案4】:

您的&lt;td class="op"&gt; 需要使用#bltable td.op background-color:#f2f2c3; 而不是#bltable td.op td background-color:#f2f2c3; 进行样式化

http://jsfiddle.net/AlienWebguy/QvdsQ/

【讨论】:

【参考方案5】:

#bltable td.op td 会选择任何TDs 下面 td.op,所以这不是您要查找的选择器。

基本上,您遇到了specificity problem:您的 row1 和 row2 选择器在其选择器中多了一个 html 元素,因此与您的 td.op 选择器相比,它们更加具体和“获胜”;您需要使您的 td.op 选择器比其他选择器更具体(或更具体),以便应用:

#bltable tr.row1 td background-color:#eff3f7;
#bltable tr.row2 td background-color:#ffffff;
#bltable tr.fotm td background-color:#ffffd9;
#bltable tr td.op background-color:#f2f2c3;

在上面,您有一个 ID、一个带有类的元素以及每个选择器的一个元素。那应该为你做。

【讨论】:

【参考方案6】:

将你的类标签更改为 id 标签,然后在它下面使用一些 javascript 来为它着色:

<style>
#bltable  border-collapse:collapse; width:575px;
    -moz-user-select:none;
#bltable tr.row1 background-color:#eff3f7;
#bltable tr.row2 background-color:#ffffff;
#bltable tr.fotm td background-color:#ffffd9;
#bltable td.op td background-color:#f2f2c3;
</style>
<table id="bloodlines">
<tr class="row1">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
    <tr class="row2">
    <td>sup</td>
    <td>sup</td>
    <td id="op">sup</td>
    <td>sup</td>
</tr>
<tr class="fotm">
    <td>sup</td>
    <td>sup</td>
    <td>sup</td>
    <td>sup</td>
</tr>
</table>

<script>
     document.getElementById("op").style.background = "#f2f2c3";
</script>

【讨论】:

【参考方案7】:

td.op 后面的 td 是错误的,因为没有嵌套的 TD。 我会改为在 td.op 之后添加 !important,应该这样做。

(我是用智能手机写的,所以无法测试,抱歉)

【讨论】:

除非必要,否则我会避免!important,在这种情况下不是。

以上是关于为单个表格单元格设置样式的主要内容,如果未能解决你的问题,请参考以下文章

PHPWordPHPWord动态生成表格table | 单元格横向合并单元格纵向合并单元格边框样式单元格垂直水平居中

如何防止表格单元格(不是单个单元格)的列中的换行?

java中导出excel设置单元格的样式为数字格式怎么设置

如何设置单个表格单元格填充?

JAVA中导出Excel将全部单元格设置为文本样式,就是导出的没有数据的单元格类型的设置

POI 插入单个单元格