Fit cell width to content

Question

Given the following markup  how could I use CSS to force one cell  all cells in column  to fit to the width of the content within it rather than stretch  which is the default behaviour     lt style type  text css  gt  td block   border  1px solid black     lt  style gt   lt table style  width  100    gt   lt tr gt       lt td class  block  gt this should stretch lt  td gt       lt td class  block  gt this should stretch lt  td gt       lt td class  block  gt this should be the content width lt  td gt   lt  tr gt   lt  table gt    EDIT  I realize I could hard code the width  but I d rather not do that  as the content which will go in that column is dynamic   Looking at the image below  the first image is what the markup produces  The second image is what I want

User · Answer

There are many ways to do this   correct me if I m wrong but the question is looking for this kind of result    lt table style  white-space nowrap width 100    gt   lt tr gt   lt td class  block  style  width 50   gt this should stretch lt  td gt   lt td class  block  style  width 50   gt this should stretch lt  td gt   lt td class  block  style  width auto  gt this should be the content width lt  td gt   lt  tr gt   lt  table gt    The first 2 fields will  share  the remaining page  NOTE  if you add more text to either 50  fields it will take more space   and the last field will dominate the table constantly   If you are happy to let text wrap you can move white-space nowrap  to the style of the 3rd field  will be the only way to start a new line in that field   alternatively  you can set a length on the last field ie  width 150px  and leave percentage s on the first 2 fields   Hope this helps

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

User · Answer

Simple         lt div style  overflow-x scroll overflow-y scroll width 100  height 100   gt

User · Answer

Setting  max-width 100   white-space nowrap    will solve your problem

User · Answer

For me  this is the best autofit and autoresize for table and its columns  use css  important     only if you can t without    myclass table       table-layout  auto  important      myclass th   myclass td   myclass thead th   myclass tbody td   myclass tfoot td   myclass tfoot th       width  auto  important      Don t specify css width for table or for table columns  If table content is larger it will go over screen size to

User · Answer

I m not sure if I understand your question  but I ll take a stab at it   x000D   x000D  td       border  1px solid  000     tr td last-child       width  1       white-space  nowrap    x000D   lt table style  width  100    gt       lt tr gt           lt td class  block  gt this should stretch lt  td gt           lt td class  block  gt this should stretch lt  td gt           lt td class  block  gt this should be the content width lt  td gt       lt  tr gt   lt  table gt  x000D   x000D   x000D

[html] Fit cell width to content

Examples related to html

Examples related to css

Examples related to html-table