Tds do not use full table width

Question

I created an HTML page with a table to store four columns (name, date, code and remove button) and, below, a form.

I want the table to have a fixed width and height of 95vw and 80vh. To do this, I’m using the display: block. The problem is that by putting this, the table rows no longer use all available width.

Look at the code below:

table {
    border-collapse: collapse;
}
tbody {
    display: block;
    height: 80vh;
    overflow-y: scroll;
    width: 95vw;
}
tr {
    text-align: center;
    width: 100%;
}
table, th, td {
    border: 1px solid black;
}
td {
    padding-top: 10px;
    padding-bottom: 10px;
}

<table id="users_table">
    <tr>
        <th>Nome</th>
        <th>Data de Expiração</th>
        <th>Código</th>
        </tr>
    <tr>
        <td>Alberto Freitas Pereira</td>
        <td>5-10-2020</td>
        <td>s2d4fDSA3fzzxxDSDQER12e</td>
    <td>Remover</td>
    </tr>
</table>
    
<form>
    <input type="text" value="something">
    <input type="submit" value="enviar">
</form>

What should I do to keep the width and height fixed with the rows filling the table?

Answer 1

Simply apply the width and the height in the table itself, without using the display: block in it:

table {
  border-collapse: collapse;
  height: 80vh;
  width: 95vw;
}
tr {
  text-align: center;
}
table, th, td {
  border: 1px solid black;
}
td {
  padding-top: 10px;
  padding-bottom: 10px;
}

<table id="users_table">
  <tr>
    <th>Nome</th>
    <th>Data de Expiração</th>
    <th>Código</th>
    <th>Remover</th>
  </tr>
  <tr>
    <td>Alberto Freitas Pereira</td>
    <td>5-10-2020</td>
    <td>s2d4fDSA3fzzxxDSDQER12e</td>
    <td>Remover</td>
  </tr>
</table>
    
<form>
  <input type="text" value="something">
  <input type="submit" value="enviar">
</form>

Of course, the problem is that, in doing so, the table rows will assume maximum height to fill the 80vh height we put to table. Expand the snippet to occupy the full screen to see the problem more clearly.

So I think applying specific height on the table may not be so necessary in that case. You can create a "parent" element relative to the table to create a border and give the table impression "empty at the end":

#users_table_wrapper {
  width: 95vw;
  height: 80vh;
  border: solid 1px #000;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
tr {
  border-bottom: solid 1px #000;
}
tr > *:not(:last-child) {
  border-right: 1px solid #000;
}
td {
  padding-top: 10px;
  padding-bottom: 10px;
}

<div id="users_table_wrapper">
  <table id="users_table">
    <tr>
      <th>Nome</th>
      <th>Data de Expiração</th>
      <th>Código</th>
      <th>Remover</th>
    </tr>
    <tr>
      <td>Alberto Freitas Pereira</td>
      <td>5-10-2020</td>
      <td>s2d4fDSA3fzzxxDSDQER12e</td>
      <td>Remover</td>
    </tr>
  </table>
</div>
    
<form>
  <input type="text" value="something">
  <input type="submit" value="enviar">
</form>

Or, alternatively, simply set not a specific height in the table, but a maximum height (max-height), thus:

table {
  border-collapse: collapse;
  max-height: 80vh;
  width: 95vw;
}
tr {
  text-align: center;
}
table, th, td {
  border: 1px solid black;
}
td {
  padding-top: 10px;
  padding-bottom: 10px;
}

<table id="users_table">
  <tr>
    <th>Nome</th>
    <th>Data de Expiração</th>
    <th>Código</th>
    <th>Remover</th>
  </tr>
  <tr>
    <td>Alberto Freitas Pereira</td>
    <td>5-10-2020</td>
    <td>s2d4fDSA3fzzxxDSDQER12e</td>
    <td>Remover</td>
  </tr>
</table>
    
<form>
  <input type="text" value="something">
  <input type="submit" value="enviar">
</form>