如何设置 tbody 的高度并让行在顶部而不是在中心？答案

【问题标题】：How to set height of tbody and let rows at top not at the center?如何设置 tbody 的高度并让行在顶部而不是在中心？
【发布时间】：2022-01-20 22:13:40
【问题描述】：

如何让顶部的行（而不是底部） 固定tbody 高度的500px！

html,body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 1rem;
}
main{
    margin: 10px;
    padding: 10px;
}
table{
    border-collapse: collapse;
    border: 1px solid;
    width: 100%;
}
tr,th,td{
    border: 1px solid;
    padding: 3px;
    text-align: center;
}
.minHeight{
    height: 500px;
}

<table>
  <thead>
    <tr>
      <th>Code Article</th>
      <th>Code TVA</th>
      <th>Remise</th>
    </tr>
  </thead>
  <tbody class="minHeight">
    <tr>
      <td>100</td>
      <td>10</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

当我得到这样的输出时，我会澄清它：

但我希望它是这样的：

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
感谢您的澄清，我已经用图片更新了问题，希望现在已经清楚了！

标签： html css height

【解决方案1】：

删除td上的text-align:center并添加vertical-align:top

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 1rem;
}

main {
  margin: 10px;
  padding: 10px;
}

table {
  border-collapse: collapse;
  border: 1px solid;
  width: 100%;
}

tr {
  border: 1px solid;
  padding: 3px;
}

th,
td {
  border: 1px solid;
  padding: 3px;
  vertical-align: top;
}

.minHeight {
  height: 500px;
}

<table>
  <thead>
    <tr>
      <th>Code Article</th>
      <th>Code TVA</th>
      <th>Remise</th>
    </tr>
  </thead>
  <tbody class="minHeight">
    <tr>
      <td>100</td>
      <td>10</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

【讨论】：

感谢您的回答！但是当我想打印页面时遇到a weird behavior
恭喜获得 100k！

【解决方案2】：

你对你想要什么的描述不是很清楚，但我会试一试。

我认为您的意思是您希望将数字放在名称下方的列表顶部，而不是在整个框的中心。

如果是这样，那么一个简单的解决方案是在第一行数据 (td) 的底部添加填充。内边距应该等于您喜欢的高度（警告：如果您添加更多数据，您将需要调整内边距）。

【讨论】：

感谢您的回答，但我认为您没有得到我想要的，我已经用图片更新了问题，希望现在更具描述性！
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。