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

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.

Answer 1

You can do this with this CSS code :

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

Answer 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>