CSS table column autowidth

Question

Given the following how do i make my last column auto size to its content   The last column should autosize-width to the content  Suppose i have only 1 li element it should shrink vs  having 3 li elements etc                 lt table cellspacing  0  cellpadding  0  border  0  gt               lt thead gt  lt  -- universal table heading -- gt                   lt tr gt                       lt td class  tc first  gt  lt input type  checkbox  value  true  name  data-1-check-all  id  data-1-check-all  gt  lt  td gt                       lt td class  tc  gt Type lt  td gt                       lt th gt File lt  th gt                       lt th gt Sample lt  th gt                       lt th gt Action lt  th gt                   lt  tr gt               lt  thead gt               lt tbody gt                   lt tr gt                       lt td gt Division 1 lt  td gt                       lt td gt Division 2 lt  td gt                       lt td gt Division 3 lt  td gt                       lt td gt Division 4 lt  td gt                       lt td gt Division 5 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt Division 1 lt  td gt                       lt td gt Division 2 lt  td gt                       lt td gt Division 3 lt  td gt                       lt td gt Division 4 lt  td gt                       lt td class  last  gt                           lt ul class  actions  gt                               lt li gt  lt a class  iconStats  href     gt Statystyki lt  a gt  lt  li gt                               lt li gt  lt a class  iconEdit  href     gt Edytuj lt  a gt  lt  li gt                               lt li gt  lt a class  iconDelete  href     gt Usun lt  a gt  lt  li gt                            lt  ul gt                       lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt    Css   table   table-layout  fixed  width  100     table tr   border-bottom 1px solid  e9e9e9    table thead td  th  border-left  1px solid  f2f2f2  border-right  1px solid  d5d5d5  background   ddd url     images sprites4 png   repeat-x scroll 0 100    font-weight  bold  text-align left   table tr td  th   border 1px solid  D5D5D5  padding 15px   table tr hover   background  fcfcfc   table tr ul actions  margin  0   table tr ul actions li  display  inline  margin-right  5px

User · Answer

You could specify the width of all but the last table cells and add a table-layout fixed and a width to the table   You could set  table tr ul actions  margin  0  white-space nowrap      or set this for the last TD as Sander suggested instead    This forces the inline-LIs not to break  Unfortunately this does not lead to a new width calculation in the containing UL  and this parent TD   and therefore does not autosize the last TD    This means  if an inline element has no given width  a TD s width is always computed automatically first  if not specified   Then its inline content with this calculated width gets rendered and the white-space-property is applied  stretching its content beyond the calculated boundaries    So I guess it s not possible without having an element within the last TD with a specific width

User · Answer

use auto and min or max width like this   td   max-width 50px  width auto  min-width 10px

User · Answer

The following will solve your problem   td last       width  1px      white-space  nowrap      Flexible  Class-Based Solution  And a more flexible solution is creating a  fitwidth class and applying that to any columns you want to ensure their contents are fit on one line    td fitwidth       width  1px      white-space  nowrap      And then in your HTML    lt tr gt       lt td class  fitwidth  gt ID lt  td gt       lt td gt Description lt  td gt       lt td class  fitwidth  gt Status lt  td gt       lt td gt Notes lt  td gt   lt  tr gt

User · Answer

If you want to make sure that last row does not wrap and thus size the way you want it  have a look at  td    white-space  nowrap

[html] CSS table column autowidth

Examples related to html

Examples related to xhtml

Examples related to css