问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用颜色填充 html 表格数据单元格？

社区维基
1
新手上路，请多包涵

我正在创建一个带有 html 表的时间线。我想根据一行中所代表的人的寿命对一行中的数据单元格进行着色。也就是说，如果这个人生活在 1835 年到 1910 年之间，那么所有这些列都会被着色。 1835 年之前的那些和 1910 年之后的那些不会。

我目前只有一个占位符波浪号作为“年”单元格的内容：

 <tr>
      <th scope="row">John Marshall Clemens</th>
      <td>Father</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>

最终效果应该看起来像这样（假设 John Marshall 至少从 1794 年到 1797 年还活着：

在此处输入图像描述

原文由 B. Clay Shannon-B. Crow Raven 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlbootstrap-table
阅读 510
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可以使用 CSS 类来完成

 .bg {
  background-color: orangered;
}

 <table>
<tr>
  <th scope="row">John Marshall Clemens</th>
  <td>Father</td>
  <td class="bg">~</td>
  <td class="bg">~</td>
  <td class="bg">~</td>
  <td class="bg">~</td>
</tr>
</table>

原文由 Arsh Shaikh 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

如果它是静态的，我希望这会有所帮助。

 .bgColor{
  background-color: #ff7f28;
  color: #ff7f28;
}

 <html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th>Name</th>
      <th>Relation</th>
      <th>1794</th>
      <th>1795</th>
      <th>1796</th>
      <th>1797</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>jhon</td>
      <td>fater</td>
      <td colspan="4" class="bgColor">~</td>
    </tr>
    <tr>
      <td>mark</td>
      <td>self</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
    </tr>
    <tr>
      <td>livy</td>
      <td>wife</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
    </tr>
    </tbody>
</table>
</body>
</html>

原文由 sachinsuthariya 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏