Angular 17 Material Table：移除单元格空白/限制行单元格高度

问题说明 #

需要让表格单元格的红色边框完全紧贴文本，消除上下空白。已尝试清除tr/td的margin、padding，手动设置高度为10px，但单元格高度仍固定为31px，未生效。

有效解决步骤 #

• 重置文本行高：单元格高度大多由文本的line-height撑开，即使清除内边距，过大的行高仍会保留空白。直接设置行高与字体大小匹配：

  td {
    line-height: 1; /* 或设置为具体数值，例如与font-size一致的14px */
    padding: 0;
    margin: 0;
  }
  

• 清除表格默认间距：浏览器默认给表格添加cellspacing，用CSS彻底重置：

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  

• 检查计算样式：通过开发者工具查看td的Computed（计算样式），确认是否有继承的min-height、父元素的line-height等强制样式，针对性覆盖：

  td {
    min-height: auto;
    line-height: inherit;
  }
  

• 优化垂直对齐：配合vertical-align确保文本垂直贴紧边框，若字体自带留白，可微调font-size和line-height：

  td {
    vertical-align: middle;
    font-size: 14px;
    line-height: 14px;
  }
  

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