title: How to auto adjust table td width from the content
body: <p>First please try to look at this <a href="http://jsfiddle.net/xe48V/" rel="noreferrer">jsFiddle</a>, as you can see I have a table with lots of columns my only problem is how can i make all the <code>td</code> adjust its width depending on how long is the text inside of it without wrapping the words?</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><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;
  </code></pre>
  
  <p>And here is my CSS code: </p>
  
  <pre><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 {
  
  }
  </code></pre>
  
  <p>Can someone please help me with this? Or if it's already been asked here please show me the link. </p>