Table with fixed headers and tbody autoheight

Question

My initial post was poorly formulated, therefor I decided to simplify my question and try it again. (Sorry for any inconvenience!)

I have a container DIV (fixed height) and want to vertically fit a table inside. The table has fixed headers and a scrollable tbody. I want the tbody to automatically adjust to the height of the surrounding container (minus the thead).

.tbody {height: auto;}

Does nothing unfortunately. Do you know of some trickery (flexbox?) to achieve my goal?

Please see the attached files/codepen as a starting point...

CodePen

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.container { /* wrapper element for table */
  width: 20%;
  height: 20%;
  background-color: lightcoral;
  border: 3px solid black;
}

.tableX {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
  border: 1px dotted black;
}

.tableX thead {
  display: block;
  color: white;
  background-color: darkgray;
}

.tableX tbody {
  display: block;
  overflow-y: auto;
  color: black;
  height: 100px; /* ----> this is the problem, I don't want a fixed height... */
}

.tableX tr {
  height: 1.5rem;
}

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>TableTerror</title>
  <link rel="stylesheet" href="tableTerror.css">
</head>
<body>
  <div class="container">
    <table class="tableX">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>first company</td>
          <td>first name</td>
          <td>first place</td>
        </tr>
        <tr>
          <td>some company</td>
          <td>some name</td>
          <td>some place</td>
        </tr>
        <tr>
          <td>some company</td>
          <td>some name</td>
          <td>some place</td>
        </tr> 
        <tr>
          <td>some company</td>
          <td>some name</td>
          <td>some place</td>
        </tr>
        <tr>
          <td>last company</td>
          <td>last name</td>
          <td>last place</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

PS: I don't care (atm) for column-width, the style of the scrollbar etc.

It's not clear what you are trying to do - what does *stretch to the next element in the surrounding container* mean - you want the table to fill the dialogue minus the other element? — Pete, Dec 04 '18 at 14:43
There is an arbitrary amount of different elements in the dialog. All neatly stacked via flex-direction: column. The table is just one of them. And yes, I want to fill the remaining dialog height with the tbody. — cl10k, Dec 04 '18 at 14:46
I am unable to understand what you are trying to achieve. Can you elaborate on it. — Aslam, Dec 04 '18 at 14:54
Does the newly added picture help to explain what I want to achieve? — cl10k, Dec 04 '18 at 15:06
Table should have `min-height` set to this auto height. I'm not sure what is this "other element". — Zydnar, Dec 04 '18 at 15:30
I reworked the example, getting rid of the "other elements" hopefully my question is clearer now... — cl10k, Dec 05 '18 at 09:36

rafaelcastrocouto · Answer 1 · 2018-12-05T21:06:01.530

I'm trying to replicate your image. Is this the layout that you need?

body {
  display: grid;
  place-content: center;
  height: 100vh;
}
.container {
  height: 30vh;
  overflow-y: scroll;
  border: 3px solid black;
}
.table {
  width: 30vw;
  min-width: 240px;
  border-collapse: collapse;
  overflow-y: scroll;
  display: block;
}
.table thead {
  position: absolute;
  background: white;
}
.table thead th {
  padding-right: 10px;
}
.table tbody tr:first-child td {
  padding-top: 30px;
}
.element {
  background: tomato;
  border: 3px solid black;
}
.element + .element {
  border-top: none;
}

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>company one</td>
        <td>name one</td>
        <td>place one</td>
      </tr>
      <tr>
        <td>some company</td>
        <td>some name</td>
        <td>some place</td>
      </tr>
      <tr>
        <td>some company</td>
        <td>some name</td>
        <td>some place</td>
      </tr>
      <tr>
        <td>some company</td>
        <td>some name</td>
        <td>some place</td>
      </tr>
      <tr>
        <td>some company</td>
        <td>some name</td>
        <td>some place</td>
      </tr>
      <tr>
        <td>some company</td>
        <td>some name</td>
        <td>some place</td>
      </tr>
      <tr>
        <td>some company</td>
        <td>some name</td>
        <td>some place</td>
      </tr>
      <tr>
        <td>last company</td>
        <td>last name</td>
        <td>last place</td>
      </tr>
    </tbody>
  </table>
</div>

Yes nearly :) the div elements have a fixed height (~1rem) though. And the outer container has a fixed height (30vh) — cl10k, Dec 04 '18 at 15:53
I reworked the example, getting rid of the "other elements" hopefully my question is clearer now... — cl10k, Dec 05 '18 at 09:36
sorry, but I don't understand what else do you need? can you explain it better? — rafaelcastrocouto, Dec 05 '18 at 15:56
If I am not mistaken, your table has a fixed height while your outer container is of variable height -> I need a solution that is the other way around. Did you have a look at my pen? If you play with the height of the browser (sub)window, you immediately see the problem I'm facing -> The table is not adjusting to the container... — cl10k, Dec 05 '18 at 20:54
I updated the answer, now the container has fixed height. Not sure if that's what you need, but we will get there soon ;D — rafaelcastrocouto, Dec 05 '18 at 21:06

Table with fixed headers and tbody autoheight

1 Answers1