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:

<div class="content">     <div class="content-header">      </div>     <div class="content-loader">         <table>             <tbody>                 <tr>                     <td>First Name</td>                     <td>Last Name</td>                     <td>Gender</td>                     <td>Birth Date</td>                     <td>Address</td>                     <td>Zip Code</td>                     <td>Nationality</td>                     <td>Contact Number</td>                     <td>Email</td>                     <td>Username</td>                     <td>Course</td>                     <td>Year</td>                     <td>ID Number</td>                     <td>Subjects</td>                     <td>Other Fields</td>                     <td>Other Fields</td>                     <td>Other Fields</td>                     <td>Other Fields</td>                     <td>Other Fields</td>                     <td>Other Fields</td>                 </tr>             </tbody>         </table>     </div> </div> 

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.

Answer 1

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

Answer 2

Use this style attribute for no word wrapping:

white-space: nowrap;