How can I extend a table vertically without affecting the content in CSS? [closed]

Question

I am building a table with HTML, but I am having problems with the CSS. Initially, it appears that the height of the table is not proportional to what it should occupy on the screen:

So I tried to increase the height of the table container:

.table {
    table-layout: fixed;
    width: 100%;
    height: 80%; /* what I tried to do */
    background-color: #ffffff; 
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 
    border-radius: 0.5rem; 
}

But when I do that, the content “stretches” vertically:

How can I keep the content as it is despite lengthening the table vertically?

Answer 1

Wrap table in container and expand container, not table itself

.wrapper {
  display: flex;
  flex-direction: column;
  height: 80vh;
  border: 1px solid gray;
}

.table {
  flex-grow: 1;
  border: 1px solid green;
}

.footer {
  flex: 0;
  border: 1px solid blue;
}

<div class="wrapper">
  <div class="table">
    <table>
      <tr>
        <td>ROW 1</td>
      </tr>
      <tr>
        <td>ROW 2</td>
      </tr>
    </table>
  </div>
  <div class="footer">
    Filter: <input/>
  </div>
</div>

Answer 2

You might also trick the table-layout of the table itself and use a pseudo element.

By default, cells expand to contain their content. Height on a cell will be closer to a min-height than a fixed height. The cell will stretch in height anyway. If you set every cell to height:0, then add a pseudo-element on the last child within the table-layout, it will stretch to fill the space left.

Below a snippet example to demonstrate the idea:

table {
  height: 100vh;
  width: 100%;
  border: 1px solid;
  border-collapse: collapse;
  background: yellow;
}

thead,
tfoot {
  background-color: #333;
  color: #fff
}

tr>* {
  height: 0;
  border: solid 1px;
}

table::before {
  content: " ";/* an empty space is needed for firefox */
  display: table-footer-group;
  /* works and needed for chrome */
  --varHeight: 100%;
  height: if(style(--varHeight: 100%): 100%; else: auto);
}

body {
  margin: 0;
}

<table>
  <thead>
    <tr>
      <th>th</th>
      <th>th</th>
      <th>th</th>
      <th>th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>footer</td>
      <td>footer</td>
      <td>footer</td>
      <td>footer</td>
    </tr>
  </tfoot>
</table>

edit It did not work in chrome browsers and requires for chrome to set ann height to the pseudo. Unfortunately, the behavior is not consistent from browsers to browsers. I had to include some CSS not yet supported in Firefox.

Finally, i would not recommend to use this since Firefox will support the if() else: CSS rule one day or another.

Answer 3

Instead of giving the table itself a height, wrap it in a container and control the height there. Then let the table just take 100% of the container’s width, while rows/cells keep their natural height.

<div class="table-container">
<table class="table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
    </tbody>
</table>
</div>

.table-container {
  height: 80vh;         /* or % if parent has a fixed height */
  display: flex;
  flex-direction: column;
}

.table {
  table-layout: fixed;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
              0 1px 2px rgba(0, 0, 0, 0.06);
  border-radius: 0.5rem;
  border-collapse: collapse;
}

/* Optional: make table scroll if content overflows */
.table-container {
  overflow-y: auto;
}