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.

add width:100% to the middle one – Temani Afif Jul 12 '18 at 18:52 — Temani Afif, Jul 12 '18 at 18:52
@TemaniAfif OMG, it's that simple, it works!!! – Gilad Novik Jul 12 '18 at 18:56 — Gilad Novik, Jul 12 '18 at 18:56

score 11 · Accepted Answer · answered Jul 12 '18 at 19:00

11

You can do this with this CSS code :

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

answered Jul 12 '18 at 19:00

PierreN

968
4
11

score 4 · Answer 2 · answered Jul 12 '18 at 18:59

4

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>

answered Jul 12 '18 at 18:59

Gilad Novik

4,546
4
41
58

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

2 Answers2