Html - How to make the last column of a table fill the remaining space?

Remco646
August 13, 2023
270 views
0 votes
2 Answers

I have a table with a fixed width and I want the size of all columns to be automatically adjusted to their content. However, if there is little content for the columns, I want only the last column to fill the remaining space.
So basically, I want the table to behave like a normal table with no fixed width. In cases where the table does not fill the maximum width of the parent, the last column should expand.
Furthermore, the table should have several rows, where the cells of the same column are exactly below each other.

Here are some examples of how the table is supposed to look:

 -----------------------------------------------------------------------
| Lorem ipsum | Lorem ipsum | Lorem ipsum                               |
 -----------------------------------------------------------------------
 -----------------------------------------------------------------------
| Lorem ipsum dolor sit amet | Lorem | Lorem ipsum dolor sit            |
 -----------------------------------------------------------------------
 -----------------------------------------------------------------------
| Lorem ipsum dolor sit | Lorem ipsum dolor sit | Lorem ipsum dolor sit |
 -----------------------------------------------------------------------
 -----------------------------------------------------------------------
| Lorem ipsum dolor sit | Lorem ipsum dolor sit | Lorem ipsum dolor sit |
| amet, consetetur      | amet, consetetur      | amet, consetetur      |
 -----------------------------------------------------------------------

The best solution I have found so far (other question on stackoverflow) uses width: 100%; on the table and the last cell and white-space: nowrap; on all cells. Problem with the solution is that the table becomes wider than it should because of the white-space: nowrap; when there is a lot of text, as you can see in the example.

div {
  width: 500px;
  background-color: #cccccc;
  padding: 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid black;
  padding: 5px;
  white-space: nowrap;
}

td:last-child {
  width: 100%;
}

<div>
  <p>This looks good:</p>
  <table>
    <tr><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td></tr>
  </table>
  <p>This doesn't:</p>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
    </tr>
  </table>
</div>

Answers

If you could use JS:

Usually I wrap the cell content into a span and have freedom to do any formatting/positioning on the content/cells:

document.querySelectorAll('table td').forEach($td => {
    
    // wrap content into a span
    const $children = $td.childNodes;
    const $span = $td.appendChild(document.createElement('span'));
    $children.forEach($child => $span.appendChild($child));
    
    // set TD width to the wrapper width
    if(!$td.matches(':last-child')){
      $td.style.width = $td.children[0].offsetWidth + 1 /* collapsed border probably */ + 'px';
    }
});

div {
  width: 500px;
  background-color: #cccccc;
  padding: 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table * {
  box-sizing:border-box;
}

td {
  padding: 0;
  border: 1px solid black;
  vertical-align: top;
}
td>span{
  padding: 5px;
  display:inline-block;
  background: yellow;
}

<div>
  <table>
    <tr><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td></tr>
  </table>
  <p></p>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
    </tr>
  </table>
</div>

Try flex. The key here is setting the flex-grow property of the last cell in a row to a high number (it defaults to 0).

div {
  width: 500px;
  background-color: #cccccc;
  padding: 10px;
}

table {
  display: contents;
}

tr {
    display: flex;
    width: 500px;  /* for reasons I do not know right now, setting this to 100% does not work */
}

td {
  display: block;
  border-top: 1px solid black;
  border-left: 1px solid black;
  padding: 5px;
}

td:last-child {
  flex-grow: 100;
  border-right: 1px solid black;
}

tr:last-child td {
  border-bottom: 1px solid black;
}

<!-- You do not have to take a table, unless it semantically fits. -->
<div>
  <table>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. Odio euismod lacinia at quis risus sed vulputate. Aliquet bibendum enim facilisis gravida neque convallis a. Lectus proin nibh nisl condimentum id venenatis. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Pretium quam vulputate dignissim suspendisse in est ante. Condimentum lacinia quis vel eros donec ac. A iaculis at erat pellentesque. Porttitor rhoncus dolor purus non. Ut faucibus pulvinar elementum integer enim. Proin gravida hendrerit lectus a. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Mollis nunc sed id semper risus in hendrerit gravida. Pretium fusce id velit ut tortor. Pellentesque massa placerat duis ultricies lacus sed turpis. Dolor magna eget est lorem ipsum dolor sit amet. Nisi est sit amet facilisis magna etiam tempor orci. In hendrerit gravida rutrum quisque.</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. Odio euismod lacinia at quis risus sed vulputate. Aliquet bibendum enim facilisis gravida neque convallis a. Lectus proin nibh nisl condimentum id venenatis. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Pretium quam vulputate dignissim suspendisse in est ante. Condimentum lacinia quis vel eros donec ac. A iaculis at erat pellentesque. Porttitor rhoncus dolor purus non. Ut faucibus pulvinar elementum integer enim. Proin gravida hendrerit lectus a. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Mollis nunc sed id semper risus in hendrerit gravida. Pretium fusce id velit ut tortor. Pellentesque massa placerat duis ultricies lacus sed turpis. Dolor magna eget est lorem ipsum dolor sit amet. Nisi est sit amet facilisis magna etiam tempor orci. In hendrerit gravida rutrum quisque.</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consetetur</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. Odio euismod lacinia at quis risus sed vulputate. Aliquet bibendum enim facilisis gravida neque convallis a. Lectus proin nibh nisl condimentum id venenatis. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Pretium quam vulputate dignissim suspendisse in est ante. Condimentum lacinia quis vel eros donec ac. A iaculis at erat pellentesque. Porttitor rhoncus dolor purus non. Ut faucibus pulvinar elementum integer enim. Proin gravida hendrerit lectus a. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Mollis nunc sed id semper risus in hendrerit gravida. Pretium fusce id velit ut tortor. Pellentesque massa placerat duis ultricies lacus sed turpis. Dolor magna eget est lorem ipsum dolor sit amet. Nisi est sit amet facilisis magna etiam tempor orci. In hendrerit gravida rutrum quisque.</td>
    </tr>
  </table>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make the last column of a table fill the remaining space?

Answers