HTML/CSS表格行间距设置无效，求正确实现方法

你的问题出在CSS的选择器和属性写法上，按下面的修改就能实现需求：

错误点梳理 #

• 选择器写错：.table table是无效的，你的表格本身就带table类，直接选中.table即可
• 属性名拼写错误：border_spacing应该是border-spacing（CSS属性用短横线分隔，不是下划线）
• 表格默认边框合并（border-collapse: collapse），这种状态下border-spacing不会生效

修改后的CSS代码 #

.table {
  /* 必须设置为separate，border-spacing才能生效 */
  border-collapse: separate;
  /* 第一个值是列间距，第二个值是行间距，可按需调整数值 */
  border-spacing: 0 0.9em;
}
.table td {
  padding: 8px;
  color: #A9A9A9;
  /* 保留每行底部的分隔线，给td设置边框即可 */
  border-bottom: 1px solid #ddd;
}

补充说明 #

• 把你原来的.table th, td和.table table样式删掉，替换成上面的代码就行，HTML部分不需要改动
• border-spacing的第二个数值就是行间距的大小，可根据视觉效果调整

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