html/css 如何在 thead tr 上添加边框

标签 html css

我想在 theadtr 底部添加一个边框。

我有如下表格。我能够在 th 的底部放置边框。然而,这不是我想要的,因为两个边界彼此交叉的地方仍然不是黑色,如下图所示。

table {
    border-collapse: collapse;
}
table thead tr th {
  border-bottom: 1px solid #000000;
}

table th,
table td {
  border: 1px solid #d9d9d9;
}
<table>
  <thead>
    <tr>
      <th>
        #
      </th>
      <th>
        Date
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        TUB1234
      </td>
      <td>
        2018/02/22
      </td>
    </tr>
  </tbody>
</table>

enter image description here

最佳答案

这是一个工作示例:
(请注意,我更正了多个 tr,我想这是一个错误。)
我为 thtd 的边框使用了 rgba 颜色。

table{
    border-collapse: collapse;
}
table thead tr th{
    border-bottom: 1px solid #000000;
}
table th, table td {
    border-left: 1px solid rgba(0,0,0,0.2);
    border-right: 1px solid rgba(0,0,0,0.2);
}
table th, table td{ /* Added padding for better layout after collapsing */
    padding: 4px 8px;
}
<table>
    <thead>
        <tr>
            <th>
               #
            </th>
            <th>
               Date
            </th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>
                TUB1234
            </td>
            <td>
                2018/02/22
            </td>
        </tr>
    </tbody>
</table>

这是另一个片段。
我不知道是否有办法改变它,但它会显示哪些边框在其他边框之上,使用您的示例:

table{
    border-collapse: collapse;
}
table th, table td { /* Multicolored border */
    border: 1px solid;
    border-color: #f00 #0f0 #00f #f0f;
}
table th, table td{ /* Added padding for better layout after collapsing */
    padding: 4px 8px;
}
<table>
    <thead>
        <tr>
            <th>
               #
            </th>
            <th>
               Date
            </th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>
                TUB1234
            </td>
            <td>
                2018/02/22
            </td>
        </tr>
    </tbody>
</table>

希望这对您有所帮助。

关于html/css 如何在 thead tr 上添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48926784/

相关文章:

html - 加密 CSS 外部链接并限制访问

php - 更新数据库时缺少参数错误

css - 将多个 Div 保持在一个容器的中心。页脚也卡在中间

php - 如何在 TinyMCE 上使用 FontAwesome 图标?

html - 模板站点未正确导入字体和图标

css - 创建一个大小相对于固定宽度 div 和包含区域的 div?

html - 使用 Angular 2 动画创建 Accordion 式导航

javascript - 如何检测访问者是否仍在网站上(轮询除外)?

系谱的 HTML CSS 无序列表。如何让它在IE8中显示与firefox保持一致?

php - 为什么我的代码在尝试防止 Sql 注入(inject)时不起作用?