Fixed width table with second column dynamic width and ellipsis

Question

I need a two column table that has only one row. The data in the first column should always display in full, but the second column should resize and the data in it should ellipse if it can't fit in the cell. If the first column expands to fit its data, the second column should contract, all while keeping the table width the same.

I tried to fix width of table and all kinds of ways to achieve this with CSS, but I couldn't figure out. It does seem like it's something that should be achievable.

This is how the table should behave with different data in the first column:

 .ellipsis { width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

 <h3>table width always the same</h3> <table border="1"> <tr> <th> Column1 </th> <th> Column2 </th> </tr> <tr> <td> <label>Display in full</label> </td> <td> <label class="ellipsis">Ellipsis this if length is too long</label> </td> </tr> </table>

Answer 1

Like I mention in the comments, it can be achieved using flex-box .

• .parent has display: flexbox
• Column 1 has white-space: nowrap to make it fit its content.
• Column 2 has flex-grow so it will take all the remain space.

 .parent { display: flex; width: 350px; border: 1px solid; } .header { text-align: center; font-weight: bold; border-bottom: 1px solid; } .parent > div:first-child { white-space: nowrap; border-right: 1px solid; } .parent > div:last-child { flex-grow: 1; } .parent div:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .parent > div > div { padding: 1px; }

 <div class="parent"> <div> <div class="header">Column1</div> <div>Display in full</div> </div> <div> <div class="header">Column 2</div> <div>Ellipsis this if length is too long</div> </div> </div>

https://jsbin.com/ferixiq/3/edit?html,css,output