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

Question

如何让顶部的行（而不是底部）固定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>

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

但我希望它是这样的:

Answer 1

你没有很好地描述你想要什么，但我会试一试。

我想你的意思是你希望数字位于名称下方的列表顶部，而不是整个框的中心。

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

Answer 2

删除 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>

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

How to set height of tbody and let rows at top not at the center?

html

css

height