How to auto adjust table td width from the content

Question

First please try to look at this jsFiddle  as you can see I have a table with lots of columns my only problem is how can i make all the td adjust its width depending on how long is the text inside of it without wrapping the words   Here is my HTML code    lt div class  content  gt       lt div class  content-header  gt        lt  div gt       lt div class  content-loader  gt           lt table gt               lt tbody gt                   lt tr gt                       lt td gt First Name lt  td gt                       lt td gt Last Name lt  td gt                       lt td gt Gender lt  td gt                       lt td gt Birth Date lt  td gt                       lt td gt Address lt  td gt                       lt td gt Zip Code lt  td gt                       lt td gt Nationality lt  td gt                       lt td gt Contact Number lt  td gt                       lt td gt Email lt  td gt                       lt td gt Username lt  td gt                       lt td gt Course lt  td gt                       lt td gt Year lt  td gt                       lt td gt ID Number lt  td gt                       lt td gt Subjects lt  td gt                       lt td gt Other Fields lt  td gt                       lt td gt Other Fields lt  td gt                       lt td gt Other Fields lt  td gt                       lt td gt Other Fields lt  td gt                       lt td gt Other Fields lt  td gt                       lt td gt Other Fields lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt   lt  div gt    And here is my CSS code     content       width  1100px      height  200px      background   fdfdfd      margin  0px auto      position  relative      top  40px      border  1px solid  aaaaaa      content  content-header       width  100       height  40px      background-color  aaa      background-image -moz-linear-gradient top  eeeeee  cccccc       background-image -webkit-gradient linear 0 0 0 100  from  eeeeee  to  cccccc        background-image -webkit-linear-gradient top  eeeeee  cccccc       background-image -o-linear-gradient top  eeeeee  cccccc       background-image linear-gradient to bottom  eeeeee  cccccc       border-bottom  1px solid  aaaaaa      content-loader       overflow  scroll     content-loader table       width  auto      background   aaa      content-loader table tr       background   eee      content-loader table tr td        Can someone please help me with this  Or if it s already been asked here please show me the link

User · Accepted Answer

Remove all widths set using CSS and set white-space to nowrap like so:

.content-loader tr td {
    white-space: nowrap;
}

I would also remove the fixed width from the container (or add overflow-x: scroll to the container) if you want the fields to display in their entirety without it looking odd...

See more here: http://www.w3schools.com/cssref/pr_text_white-space.asp

User · Answer

Use this style attribute for no word wrapping   white-space  nowrap

User · Answer

you could also use display  table insted of tables  Divs are way more flexible than tables   Example    x000D   x000D   table   x000D     display  table  x000D     border-collapse  collapse  x000D    x000D    x000D   table  table-row   x000D     display  table-row  x000D    x000D    x000D   table  table-cell   x000D     display  table-cell  x000D     text-align  left  x000D     vertical-align  top  x000D     border  1px solid black  x000D    x000D   lt div class  table  gt  x000D    lt div class  table-row  gt  x000D     lt div class  table-cell  gt test lt  div gt  x000D     lt div class  table-cell  gt test1123 lt  div gt  x000D    lt  div gt  x000D    lt div class  table-row  gt  x000D     lt div class  table-cell  gt test lt  div gt  x000D     lt div class  table-cell  gt test123 lt  div gt  x000D    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[html] How to auto adjust table td width from the content

Examples related to html

Examples related to css

Examples related to html-table