How to make a table cell stretch for the rest of the width?

Question

I'm trying to create a simple table with 3 columns: the first/last should take the exact width of their children and the middle one should stretch and fill the rest of it.

.table {
  display: table;
  width: 100%;
}

I've tried using both <table> element, as well as flex - but not sure how to achieve this.

I can do it per line using flex, but then the first/last columns won't be aligned across rows. In addition, I don't want to set a fixed width for the first/last column.

Solution 1

You can do this with this CSS code :

.table tr td:nth-child(2) { width:100% }

Solution 2

Based on @TemaniAfif comment, the answer is very simple:

<table>
    <tr>
        <td>1</td>
        <td style='width: 100%;'>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>-</td>
        <td>6</td>
    </tr>
</table>

Comments

[Gilad Novik]

@TemaniAfif OMG, it's that simple, it works!!!

[Temani Afif]

add width:100% to the middle one