How to get the td in HTML tables to fit content and let a specific td fill in the rest

Question

This is a hypothetical example    x000D   x000D  table  thead  tbody  tr   width  100     x000D      table   table-layout  fixed   x000D      table  gt  thead  gt  tr  gt  th   width  auto    x000D   lt table gt  x000D         lt thead gt  x000D           lt tr gt  x000D             lt th gt Column A lt  th gt  x000D             lt th gt Column B lt  th gt  x000D             lt th gt Column C lt  th gt  x000D             lt th class  absorbing-column  gt Column D lt  th gt  x000D           lt  tr gt  x000D         lt  thead gt  x000D         lt tbody gt  x000D           lt tr gt  x000D             lt td gt Data A 1 lorem lt  td gt  x000D             lt td gt Data B 1 ip lt  td gt  x000D             lt td gt Data C 1 sum l lt  td gt  x000D             lt td gt Data D 1 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt Data A 2 ipsum lt  td gt  x000D             lt td gt Data B 2 lorem lt  td gt  x000D             lt td gt Data C 2 some data lt  td gt  x000D             lt td gt Data D 2 a long line of text that is long lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt Data A 3 lt  td gt  x000D             lt td gt Data B 3 lt  td gt  x000D             lt td gt Data C 3 lt  td gt  x000D             lt td gt Data D 3 lt  td gt  x000D           lt  tr gt  x000D         lt  tbody gt  x000D       lt  table gt  x000D   x000D   x000D    I want to have every single column s width to fit its content size  and leave the rest of the space for the one column with the  absorbing-column  class  so that it looks like this     HTML                                                                     100    body                                                                     100    table                                                                    100   ------------------------------------------------------------------------    Column A   Column B         Column C   Column D                           ------------------------------------------------------------------------    Column A   Column B lorem   Column C   Column D                            Column A   Column B         Column C   Column D                            Column A   Column B         Column C   Column D                           ------------------------------------------------------------------------    You see  Column B is a bit bigger than the rest due to the extra data in the first row  but Column D always uses up the remaining space   I played around with max-width  min-width  auto  etc  and could not figure out how to make this work   In other words  I want all columns to take whatever width they need and not more  and then I want Column D to use up all of the remaining space inside the 100  width table

User · Answer

use overflow   overflow  visible

User · Answer

Define width of  absorbing-column  Set table-layout to auto and define an extreme width on  absorbing-column   Here I have set the width to 100  because it ensures that this column will take the maximum amount of space allowed  while the columns with no defined width will reduce to fit their content and no further   This is one of the quirky benefits of how tables behave  The table-layout  auto algorithm is mathematically forgiving   You may even choose to define a min-width on all td elements to prevent them from becoming too narrow and the table will behave nicely    x000D   x000D  table   x000D      table-layout  auto  x000D      border-collapse  collapse  x000D      width  100   x000D    x000D  table td   x000D      border  1px solid  ccc  x000D    x000D  table  absorbing-column   x000D      width  100   x000D    x000D   lt table gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Column A lt  th gt  x000D         lt th gt Column B lt  th gt  x000D         lt th gt Column C lt  th gt  x000D         lt th class  absorbing-column  gt Column D lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Data A 1 lorem lt  td gt  x000D         lt td gt Data B 1 ip lt  td gt  x000D         lt td gt Data C 1 sum l lt  td gt  x000D         lt td gt Data D 1 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Data A 2 ipsum lt  td gt  x000D         lt td gt Data B 2 lorem lt  td gt  x000D         lt td gt Data C 2 some data lt  td gt  x000D         lt td gt Data D 2 a long line of text that is long lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Data A 3 lt  td gt  x000D         lt td gt Data B 3 lt  td gt  x000D         lt td gt Data C 3 lt  td gt  x000D         lt td gt Data D 3 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

demo - http   jsfiddle net victor 007 ywevz8ra   added border for better view  testing   more info about white-space  table      width 100     table td      white-space  nowrap       added       table td last-child      width 100        x000D   x000D      table   x000D        width  100   x000D        x000D      table td   x000D        white-space  nowrap  x000D        x000D      table td last-child   x000D        width  100   x000D        x000D   lt table border  1  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt Column A lt  th gt  x000D         lt th gt Column B lt  th gt  x000D         lt th gt Column C lt  th gt  x000D         lt th class  absorbing-column  gt Column D lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Data A 1 lorem lt  td gt  x000D         lt td gt Data B 1 ip lt  td gt  x000D         lt td gt Data C 1 sum l lt  td gt  x000D         lt td gt Data D 1 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Data A 2 ipsum lt  td gt  x000D         lt td gt Data B 2 lorem lt  td gt  x000D         lt td gt Data C 2 some data lt  td gt  x000D         lt td gt Data D 2 a long line of text that is long lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Data A 3 lt  td gt  x000D         lt td gt Data B 3 lt  td gt  x000D         lt td gt Data C 3 lt  td gt  x000D         lt td gt Data D 3 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Setting CSS width to 1  or 100  of an element according to all specs I could find out is related to the parent  Although Blink Rendering Engine  Chrome  and Gecko  Firefox  at the moment of writing seems to handle that 1  or 100   make a columns shrink or a column to fill available space  well  it is not guaranteed according to all CSS specifications I could find to render it properly   One option is to replace table with CSS4 flex divs   https   css-tricks com snippets css a-guide-to-flexbox   That works in new browsers i e  IE11  see table at the bottom of the article

[html] How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest

Examples related to html

Examples related to css

Examples related to html-table

Examples related to width