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

Question

How can let the rows at the top (not at the bottom) with fixed tbody height of 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>

I would clarify it as I get output like this:

But I want it to be like this:

Answer 1

Remove text-align:center on the td and add 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>