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

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 >
    <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:

CodePudding user response：

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 >
    <tr>
      <td>100</td>
      <td>10</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

You are not very descriptive on what you want but I'll give it a try.

I think you mean that you want the numbers on top of the list under the name and not in the center of it's entire box.

If so, then one simple solution is to add padding to the bottom of your first row of data (td). The padding should be equal to the height of your liking (warning: if you add more data you will need to adjust the padding).