HTML表格CSS颜色只用于文本，不用于边框？

dojqjjoe 于 2022-12-05 发布在其他

关注(0)|答案(5)|浏览(846)

我试过以下方法，但是边框也是红色的。我只想让文字变成红色，可以吗？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <style>
    .class2,
    .class2 tr,
    .class2 td {
      border: solid 2px;
      border-collapse: collapse;
    }
    
    .class1{
      color: red;
    }
  </style>
</head>

<body>
  <table class="class2">
    <tr class="class1">
      <td>hello</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello</td>
      <td>world</td>
    </tr>
  </table>
</body>

</html>

css

来源：https://stackoverflow.com/questions/74677799/html-table-css-colour-only-for-text-not-for-border

5条答案

按热度按时间

1tuwyuhd1#

您可以在类别中加入规则来覆写border-color：

.class1 td {
  color: red;
  border-color: #000;
}

但是，我通常会将颜色添加到主边框声明中，如下所示：

.class2,
.class2 tr,
.class2 td {
  border: solid 2px #000;
  border-collapse: collapse;
}

赞(0）回复(0）举报 2022-12-05

rdrgkggo2#

你需要为文本指定一个带有颜色类的标签，就像span元素一样，它应该只给文本着色，同时保持边框的原始颜色。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <style>
    .class2,
    .class2 tr,
    .class2 td {
      border: solid 2px;
      border-collapse: collapse;
    }
    
    .class1{
      color: red;
    }
  </style>
</head>

<body>
  <table class="class2">
    <tr>
       <td><span class="class1">hello</span></td>
       <td><span class="class1">world</span></td>
    </tr>
    <tr>
      <td>hello</td>
      <td>world</td>
    </tr>
  </table>
</body>

</html>

赞(0）回复(0）举报 2022-12-05

xkrw2x1b3#

从.class1 td中删除td，td也会导致将样式应用到表上，并且如果没有指定其他内容，颜色标记只对文本起作用

赞(0）回复(0）举报 2022-12-05

xmakbtuz4#

自从我第一次发帖以来，已经阅读了你的评论，也许你应该看看媒体查询，因为你似乎可以使用它们来定位用户主题（虽然这可能目前有有限的浏览器支持）。对我来说，在我的机器上运行黑暗主题，我看到一个黄色的边框，但在光明主题，我看到红色。（作为参考，我使用的是谷歌浏览器）。这样，你就可以为浅色和深色主题设置边框颜色。

<html>
<head>
  <meta charset="utf-8">
  <style>
    .class2,
    .class2 tr,
    .class2 td {
      border: solid 2px currentcolor;
      border-collapse: collapse;
    }
    
    .class1 td {
      color: red;
      
    }
    
    @media (prefers-color-scheme: dark) {
      .class1 td {
        border-color: #FF0;
      }
    }
  </style>
</head>

<body>
  <table class="class2">
    <tr class="class1">
      <td>hello</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello</td>
      <td>world</td>
    </tr>
  </table>
</body>
</html>

赞(0）回复(0）举报 2022-12-05

hgc7kmma5#

您可以将边框颜色规则添加到表格中，将边框颜色设置为黑色。

.class2,
    .class2 tr,
    .class2 td {
      border: solid 2px;
      border-collapse: collapse;

      border-color: #000;

    }

赞(0）回复(0）举报 2022-12-05

我来回答

HTML表格CSS颜色只用于文本，不用于边框？

5条答案

相关问题

热门标签

最新问答