Table: expand column to fit width, but keep row height to single line

Question

I have a table that fills its container's width. It has three columns. Two columns have a fixed width while the third must expand to fill the remaining width. The width of the table is dynamic.

I can get this to work if a row's height may expand, but I need each row to only have a single line of text. If the text is too long then it must be cut off.

Code + examples: ( https://jsfiddle.net/o044tq53/5/ )

EDIT: I rewrote the above description and updated the jsfiddle with an example showing what it should look like.

 #wrapper { width:200px; background:white; } table { border-collapse:collapse; text-align: left; width:100%; margin-bottom:30px; } div { overflow:hidden; white-space: nowrap; text-align:left; } .td_col_two { width:100%; } .col_one_div { width:90px; background: red; } .col_two_div { background: lightblue; overflow:hidden; } .col_three_div { width:20px; background: lightgreen; } 

 <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div class = "col_one_div"> Robin </div> </td> <td class = "td_col_two"> <div class = "col_two_div"> nowrap does not work for long text. </div> </td> <td> <div class = "col_three_div"> x </div> </td> </tr> </table> 

Answer 1

Consider using display:flex and flex:1(flex-grow:1)

check this snippet

 #wrapper { background: white; display: flex; flex-direction: column; border:1px solid black; } #wrapper table { flex: 1; width: 100%; } table, tr, td { border: 1px solid; } #table-two div { word-wrap:break-all; } .td_col_two { width: 100%; } .col_one_div { background: red; } .col_two_div { background: lightblue; } .col_three_div { width: 20px; background: lightgreen; } 

 <div id="wrapper"> <table id="table-one"> <tr> <td> <div class="col_one_div"> Robin </div> </td> <td class="td_col_two"> <div class="col_two_div"> Short works </div> </td> <td> <div class="col_three_div"> x </div> </td> </tr> </table> <table id="table-two"> <tr> <td> <div class="col_one_div"> Robin </div> </td> <td class="td_col_two"> <div class="col_two_div"> White-space normal also works. </div> </td> <td> <div class="col_three_div"> x </div> </td> </tr> </table> <table id="table-three"> <tr> <td> <div class="col_one_div"> Robin </div> </td> <td class="td_col_two"> <div class="col_two_div"> nowrap does not work for long text. </div> </td> <td> <div class="col_three_div"> x </div> </td> </tr> </table> </div> 

Hope this helps