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

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.

you could also use display: table insted of tables. Divs are way more flexible than tables.

Example:

.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_
}

<div class="table">_x000D_
 <div class="table-row">_x000D_
  <div class="table-cell">test</div>_x000D_
  <div class="table-cell">test1123</div>_x000D_
 </div>_x000D_
 <div class="table-row">_x000D_
  <div class="table-cell">test</div>_x000D_
  <div class="table-cell">test123</div>_x000D_
 </div>_x000D_
</div>

Use this style attribute for no word wrapping:

white-space: nowrap;