如何在表格单元格中的文本下制作特定宽度的条纹

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (21)

我有个小麻烦。我在用HTML制作化学元素表。我把整个表格分成了几个部分,这意味着化学元素的不同类型/组。但是.有些金属被称为不同的,例如碱性金属,但它们仍然是金属组。所以我想把整张桌子上的细胞弄成灰色,还在中间做了一条浅绿色的条纹来看,那就是它的碱金属。下面是一段代码:

<td class="metal">
    <a href="aboutelement">
    <strong>Li</strong>
    <span class="atomicnumber">3</span>
    <em>Lithium</em>
    <span class="atomicweight">6.939</span>
    </a>
</td>

我只想做绿色条纹,也就是T.cell的文字后面,这不会影响文字的布局和背景上的灰色。我可以用CSS发送更详细的这个版本,但是我想你会明白我想做什么。

提问于
用户回答回答于

td {
    background: linear-gradient(#eee 48%, green, #eee 52%);
    padding: 10px;
}

a {
    color: #000;
    font-size: 22px;
}
<table>
    <tr>
        <td>
            <a href="aboutelement">
                <strong>Li</strong>
                <span class="atomicnumber">3</span>
                <em>Lithium</em>
                <span class="atomicweight">6.939</span>
            </a>
        </td>
    </tr>
</table>

扫码关注云+社区

领取腾讯云代金券