为HTML表格行设置border-radius后出现多余背景的解决方法

问题出在你把背景色加在了<td>上，同时用了border-collapse: separate模式——这种模式下，<tr>的overflow: hidden管不住<td>的背景，导致圆角边缘外的背景露出来，形成多余的色块。

直接改这几点就行：

• 把背景色从<td>移到<tr>上
• 把所有<td>的背景设为透明
• 给<tr>加统一的圆角，删掉原来给首尾<td>单独加的圆角规则

修改后的完整代码：

.attendance-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;

    thead tr {
        height: 25px;
    }

    thead tr th {
        padding: 0 5px;
        white-space: nowrap;
    }

    tbody tr {
        box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.10);
        overflow: hidden;
        font-size: 12px;
        font-weight: bold;
        border-radius: 5px; /* 给整行加圆角 */
    }

    /* 背景色直接加在行上 */
    tbody tr:nth-child(odd) {
        background-color: rgba(34,158,219,0.1);
    }

    tbody tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 1);
    }

    tbody tr td {
        height: 30px;
        padding: 6px 15px;
        border: none;
        background-color: transparent; /* 单元格背景透明，显示行的背景 */
    }

    /* 删掉原来针对首尾单元格的圆角规则 */
}

如果一定要保留<td>的背景设置（比如不同单元格需要不同背景），可以给每个<td>加background-clip: padding-box，不过这种场景下，直接把背景放在<tr>上是最省心的方案。

内容的提问来源于stack exchange，提问作者Mezbaul Islam Aunik