0

I have a table:

table {
  width: 100%;
  border: 1px solid grey;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  border: 1px solid grey;
  padding: 5px;
}

.rest-of-width {
  background: red;
}
<table>
  <tr>
    <th>Id</th>
    <th>Name</th>    
    <th class="rest-of-width">Notes</th> 
  </tr>
  <tr>
    <td>1</td>
    <td>Foo bar baz</td>
    <td>This column should take up the rest of the space</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

I've set its width to 100% and all the columns inside the table auto-size to total 100% as expected.

However, I'd like all columns to size as if the table width was auto, except the column with the class rest-of-width on it, which should take up the remaining space.

A bit like this flexbox example:

.wrapper {
  display: flex;
  border: 1px solid grey;
}

.wrapper__a,
.wrapper__b,
.wrapper__c {
  padding: 5px;
  border: 1px solid grey;
}

.wrapper__c {
  flex: 1;
  background: red;
}
<div class="wrapper">
  <div class="wrapper__a">Id</div>
  <div class="wrapper__b">Name</div>
  <div class="wrapper__c">Notes</div>
</div>

Is this possible using a CSS property?

MorganR
  • 619
  • 3
  • 11
  • 22
  • There are hacky and messy solutions, but none as simple as the css you are looking for [Maybe this helps?](https://stackoverflow.com/questions/20044452/css-table-with-one-column-taking-remaining-space) – Rohith Balaji Oct 06 '19 at 13:48
  • @LGSon He doesn't want the flex. He wants that in the table itself. – Rohith Balaji Oct 06 '19 at 14:35
  • I was hoping for less hacky solutions, but it doesn't look like that's possible even in 2019. Thanks @LGSon. I'm happy for this to be closed as duplicate. – MorganR Oct 06 '19 at 15:19

0 Answers0