如何强制我的标题表行与其他表行高度相同？

【问题标题】：How do I force my header table row to be the same height as the other table rows?如何强制我的标题表行与其他表行高度相同？
【发布时间】：2018-02-15 05:24:40
【问题描述】：

我希望我的所有行，甚至我的表格标题行，都具有相同的高度。我将此添加到我的样式表中

#currencyTable tr {
  text-align: left;
  min-height: 30px;
}

但是如果你看看我的小提琴——https://jsfiddle.net/4qmmeqsk/，你会注意到标题行与其他行的高度不同（至少它没有相同的填充）。如何使我的标题行与其他表格行的高度相同？

【问题讨论】：

在您的 CSS 中添加样式 th 并为其指定填充或高度。像这样：th { padding:10px; } 或 th { height:20px; }

标签： html css html-table height css-tables

【解决方案1】：

只要给你的 th 和 td 一样的填充：

padding: 12px;

或：

padding: 12px 0; // top and bottom

对于您的项目：

th {    
   padding: 12px 0;
}

如果你想保持背景更小，使用边距：

margin: 12px;

或：

margin: 12px 0; // top and bottom

对于您的项目：

th {    
   margin: 12px 0;
}

【讨论】：

【解决方案2】：

“最小高度”css 并没有真正做任何事情，它对响应式设计更有用。您可以设置绝对高度、最大高度或增加内边距。

#currencyTable tr,th { height: 30px; max-height: ...px; }

【讨论】：