Make a greedy pill?

Question

I have a row in a table in which there are 3 cells with values ​​of A, B and C, and the table is the full screen width, which is more than enough for all 3. Right now, when they display, all cells get 1/3 of the room but that is not what i want. I want the 2nd and 3rd cells to be their “correct” sizes, and the first cell will take the difference. I can't just set the width on them because they have a dynamic size. How can i do this?

Answer 1

I tried the Diodeus and Rune methods, but this did not help for my example. I ended up merging on cells B and C since I could not find anything. Thank you for your help.

Answer 2

Code A and C in pixels and specify B width 100%

Answer 3

Just set the table width to 100%, width from A to 100% and B and C to auto. Tested and working

<table border="1px" width="100%"> <tr> <td width="100%">A</td> <td width="auto">BB</td> <td width="auto">CCC</td> </tr> </table> 

Answer 4

Try

 <table border="1px" width="100%"> <tr> <td width="100%" height="100" style="background:#ff0000; display:block">A</td> <td width="100%" height="100" style="background:#00ff00; display:block">BB</td> <td width="100%" height="100" style="background:#ff00ff; display:block">CCC</td> </tr> </table> 

Answer 5

A response to Rune with a Pistos comment made me shut. The final step was to add style = "white-space: nowrap" to the inanimate columns, specifying:

 <table border="1px" width="100%"> <tr> <td width="100%">A wide column</td> <td style="white-space:nowrap">Compact column 1</td> <td style="white-space:nowrap">Another compact column</td> </tr> </table> 

Works for me in Firefox 25.