如何减小HTML表格行高？CSS设置tr高度为0无效的解决方法

问题描述 #

需要缩小表格中 "Mon-Sat 09:00 AM - 7:00 PM" 和 "We closed Sunday & Holidays" 两行所在行的间距，此前编写的CSS代码未生效，表格默认行高过大。
参考效果截图：

原有失效代码 #

原有CSS：

.tb tr {
  height: 0px;
}

table {
  margin: 0 15.0% 0 0;
  float: right;
}

p {
  font-weight: bold;
  float: right;
}

span {
  font-weight: bold;
  color: red;
}

原有HTML结构：

<table class="tb">
  <tr>
    <td>
      <p>Business Hours:</p>
    </td>
    <td><span>Mon - Sat 09:00AM - 7:00PM</span></td>
  </tr>

  <tr>
    <td></td>
    <td><span>We closed Sunday & Holidays</span> </td>
  </tr>
</table>

失效原因 #

代码不生效的核心原因有两个：

• 直接给tr设置height: 0px无效：表格行高度会被内部内容、单元格内边距撑开，优先级远高于直接给tr设置的高度属性
• 没有清除浏览器默认样式：td标签自带默认上下内边距，单元格内的p标签自带默认上下外边距，这两部分默认留白才是行间距过大的根本原因，之前的代码没有处理这两个属性。

正确实现方案 #

替换原有CSS为以下代码即可，样式仅作用于当前表格，不会影响页面其他元素：

.tb {
  margin: 0 15.0% 0 0;
  float: right;
  border-collapse: collapse; /* 合并表格单元格默认间距 */
}

/* 控制单元格内边距，调整上下padding数值即可修改整体行高 */
.tb td {
  padding: 3px 0;
  vertical-align: top;
}

/* 清除p标签默认外边距 */
.tb p {
  font-weight: bold;
  float: right;
  margin: 0;
}

.tb span {
  font-weight: bold;
  color: red;
}

/* 可选：如果要让第二行营业时间和第一行贴得更近，添加这段规则 */
.tb tr:nth-child(2) td {
  padding-top: 0;
}

如果需要调整行间距大小，直接修改.tb td的padding上下数值即可，数值越小行间距越窄。

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