如何为已添加内边框的Table通过CSS添加底部边框？

你的核心问题在于table设置了border-style: hidden，会覆盖表格自身的外边框样式，同时当前CSS对td/th的border-bottom设置没有针对性。以下分三种常见需求给出解决方案：

需求1：给整个表格添加底部外边框 #

修改table的边框设置，只隐藏不需要的外边框，保留底部边框：

table {
    border-collapse: collapse;
    /* 隐藏顶部、左、右外边框，保留底部 */
    border-top: hidden;
    border-left: hidden;
    border-right: hidden;
    border-bottom: 1px solid black;
}

table td, table th {
    border: 1px solid black; /* 保持内边框效果 */
}

需求2：给表头（thead）下方添加加粗底部边框 #

针对表头行单独设置底部边框，区分表头和内容区域：

table {
    border-collapse: collapse;
    border-style: hidden; /* 保持原内边框的隐藏外边框逻辑 */
}

table td, table th {
    border: 1px solid black;
}

/* 给表头行设置底部边框，可根据需求调整粗细/颜色 */
thead tr {
    border-bottom: 2px solid #333;
}

需求3：给表格最后一行（tbody末尾）添加底部边框 #

使用:last-child选择器定位tbody的最后一行：

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

/* 给tbody最后一行的单元格设置底部边框 */
tbody tr:last-child td {
    border-bottom: 1px solid black;
}

原代码问题说明 #

你之前的CSS中，table td, table th重复设置border和border-bottom，但因为table的border-style: hidden，整个表格的外底部边框无法显示；如果是需要特殊的底部边框（如表头或末行），则需要单独针对元素设置样式。

内容的提问来源于stack exchange，提问作者Tigane