如何为<table>内所有<th>元素添加上下边框及连贯的上下内边距

解决方法 #

核心问题说明 #

• border-collapse、border-spacing是表格专属属性，必须写在table选择器下才能生效，原来写在td选择器内的规则无效
• 原代码中的.td类不存在，对应的内边距规则没有命中任何元素

修正后的CSS代码 #

/* 表格基础配置，保证边框合并无间隙 */
.table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* th样式：上下边框+内边距，实现连贯效果 */
.table th {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  /* 上下内边距可按需调整数值，实现你要的留白效果 */
  padding: 10px 6px;
  text-align: left;
}

/* td样式保留原有边框，增加内边距和表头对齐 */
.table td {
  border: 1px dotted black;
  padding: 8px 6px;
}

效果说明 #

修改后所有表头<th>会自动应用上下边框，上下内边距会随你设置的padding值生效，配合border-collapse: collapse属性，边框和内边距都是连贯无断开的效果。

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