How to automatically set a <td>'s height to fill up maximum space?

April 14, 2023

The answer is probably something very simple, seems CSS positioning is a weak point for me.

I’d like a <td> cell to take up the entire height of it’s parent <tr>, so that it looks like this:

For this example, I’m trying to get col1 to have the same height as col2, which is unknown and varies. I’d like col1‘s two children to be positioned at the top and bottom of the cell, presumably using display: flex, flex-direction: column, and justify-content: space-between. However this doesn’t produce the result I’d like because col1‘s height is only fitting it’s own content, not the height of it’s parent.

To my knowledge, I’d assume height: 100% would get col1‘s height to take up the space provided, but that isn’t working.

td {
  width: 100px;
  background-color: red;
}

.col1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

table {
  background-color: blue;
}

p {
  margin: 0
}

<table>
  <tbody>
    <tr>
      <td class="col1">
        <p>col1 content</p>
        <p>col1 content</p>
      </td>
      <td class="col2">
        <p>col2 content</p>
        <p>col2 content</p>
        <p>col2 content</p>
        <p>col2 content</p>
      </td>
    </tr>
  </tbody>
</table>

Any ideas?

>Solution :

I can’t get it to work either. I don’t know the technical details, and I don’t know what kind of content you want to display. But I do know that you should only use tables for tabular data, not for general layout. From the HTML spec:

Tables must not be used as layout aids. Historically, some web authors
have misused tables in HTML as a way to control their page layout.

However, I have found some alternatives for you. Hopefully one of these will work:

(1) You can use a grid instead of a table

.d1 {
  display: inline-grid;
  grid-template-columns: 100px 100px;
  background-color: blue;
  padding: 2px;
  gap: 2px;
}

.d1>* {
  background-color: red;
}

.col1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

p {
  margin: 0
}

<div class="d1">
    <div class="col1">
      <p>col1 content</p>
      <p>col1 content</p>
    </div>
    <div class="col2">
      <p>col2 content</p>
      <p>col2 content</p>
      <p>col2 content</p>
      <p>col2 content</p>
    </div>
</div>

(2) You can use absolute positioning if you are sure that overlapping won’t be a problem

table {
  background-color: blue;
}

td {
  width: 100px;
  background-color: red;
  vertical-align: top;
}

.col1 {
  position: relative;
}

.col1>*:last-child {
  position: absolute;
  bottom: 0;
}

p {
  margin: 0
}

<table>
  <tbody>
    <tr>
      <td class="col1">
        <p>col1 content</p>
        <p>col1 content</p>
      </td>
      <td class="col2">
        <p>col2 content</p>
        <p>col2 content</p>
        <p>col2 content</p>
        <p>col2 content</p>
      </td>
    </tr>
  </tbody>
</table>

(3) You can pad the content with blank paragraphs so the sizes match

table {
  background-color: blue;
}

td {
  width: 100px;
  background-color: red;
}

p {
  margin: 0
}

<table>
  <tbody>
    <tr>
      <td class="col1">
        <p>col1 content</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>col1 content</p>
      </td>
      <td class="col2">
        <p>col2 content</p>
        <p>col2 content</p>
        <p>col2 content</p>
        <p>col2 content</p>
      </td>
    </tr>
  </tbody>
</table>