如何强制我的 header table 行与其他 table 行的高度相同？

Question

我希望我所有的行，甚至 table header 行，都具有相同的高度。我将其添加到我的样式表

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

但是如果您查看我的 fiddle -- https://jsfiddle.net/4qmmeqsk/，您会注意到 header 行与其他行的高度不同（至少它不一样）没有相同的填充）。如何使我的 header 行与其他 table 行的高度相同？

Answer 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;
}

Answer 2

"min-height" css 并没有真正起到什么作用，它对响应式设计更有用。您可以设置绝对高度、最大高度或增加填充。

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