html - 表格内部边框不显示

标签 html css

我正在使用下面所示的 CSS 类来格式化表格。该表仅显示外部边框,而不显示内部边框。

没有设置其他样式选项,只有 <table class="my-table"> .

请问我错过了什么/做错了什么?

table.my-table {
        border: solid thin;
        border-collapse: separate;
        border-spacing: 0px;
        border-color: black;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        font-size: 14px;
    }
    
            table.my-table tbody th {
                background: rgb(28, 58, 112);
                background: rgba(28, 58, 112, 1);
                color: rgb(255,255,255);
                color: rgba(255,255,255,1);
            }
    
            table.my-table tbody tr:nth-child(even) {
                background: rgb(255, 255, 255);
                background: rgba(255, 255, 255, .8);
            }
    
            table.my-table tbody tr:nth-child(odd) {
                background: rgb(239, 239, 239);
                background: rgba(239, 239, 239, .8);
            }
    
            table.my-table tbody td {
                background: rgb(255, 255, 255);
                background: rgba(255, 255, 255, 1);
                color: rgb(0, 0, 0);
                color: rgba(0, 0, 0, 1);
            }
<table class="my-table">
  <tr>
    <td>test</td>
    <td>test 2</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test 2</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test 2</td>
  </tr>
</table>

最佳答案

What have I missed / done wrong, please?

您仅在表格上设置了边框。

CSS border 属性并不等同于过时的 border 属性。

如果要在单元格上设置边框,则必须编写一个针对这些单元格的选择器并在其上设置边框

关于html - 表格内部边框不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42066447/

相关文章:

css - 将 li 左中右对齐

javascript - .slideToggle() 在元素到达页面顶部时隐藏元素,动画出现缩短

JavaScript;背景颜色更改并使用/相同输入改回

PHP DOM 和 JavaScript 以及 HTML 实体

html - 将 HTML 文档中的 HTML 实体转换为纯 UTF 字符的任何好工具?

html - 滞后的 CSS 动画

css - 是否可以将定位元素从具有转换的父元素中分离出来?

javascript - jquery checkall 按钮和 uncheckall 按钮来选择其他复选框

javascript - Safari上动态YouTube播放器的问题

html - 如何单独定位嵌套图像?