title: How to get the table (datatable) left aligned?
body: <p>Given the following code, how do I left align the table without using <code>float:left</code>? I thought applying <code>text-align:left</code> to the parent element of the table would do the job, but it doesn't.</p>
  
  <p><a href="http://jsfiddle.net/william/B4qJG/1" rel="nofollow">http://jsfiddle.net/william/B4qJG/1</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="valueList"&gt;
   &lt;div class="valuePair"&gt;
     &lt;label&gt;Assets&lt;/label&gt;
  
    &lt;div&gt;
      &lt;div&gt;
        &lt;div class="dataTables_wrapper"&gt;
          &lt;table cellspacing="0" style="border-collapse:collapse;" class="display"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th scope="col" class="sorting_asc" style="width: 406px;"&gt;Name&lt;/th&gt;
  
                &lt;th scope="col" class="sorting" style="width: 440px;"&gt;AssetNumber&lt;/th&gt;
  
                &lt;th scope="col" class="sorting" style="width: 305px;"&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
  
            &lt;tbody&gt;
              &lt;tr class="odd"&gt;
                &lt;td class=" sorting_1"&gt;Chair&lt;/td&gt;
                &lt;td&gt;2323424&lt;/td&gt;
                &lt;td&gt;&lt;a href="#"&gt;Remove&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr class="even"&gt;
                &lt;td class=" sorting_1"&gt;Table&lt;/td&gt;
                &lt;td&gt;34345345&lt;/td&gt;
                &lt;td&gt;&lt;a href="#"&gt;Remove&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;input type="button" value="Add Asset" /&gt;
    &lt;/div&gt;
  
    &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.valueList
  {
      width: 100%;
      text-align: left;
  }
  
      .valueList .valuePair
      {
          width: 100%;
          padding: 0.3em 0;
          border-top: 1px #eee solid;
      }
  
      .valueList .valuePair *
      {
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
          -webkit-box-sizing:border-box;
      }
  
      .valueList .valuePair:first-child
      {
          border-top: 0;
      }
  
          .valueList .valuePair &gt; div, .valueList .valuePair &gt; label
          {
              float: left;
              padding: 0.3em 0;
              line-height: 2em;
              border: 1px solid transparent;
          }
  
          .valueList .valuePair &gt; *:first-child
          {
              width: 20%;
              /*margin-right: 1%;*/
              padding-right: 1%;
              font-weight: bold;
          }
  
          .valueList .valuePair &gt; * + div
          {
              width: 75%;
              border-color: white;
              padding-left: 1%;
          }
  
          .valueList .valuePair &gt; div.clear
          {
              padding: 0;
              border: 0;
              height:0;
          }
  
              .valueList .valuePair &gt; * + div &gt; input[type=text],
              .valueList .valuePair &gt; * + div &gt; textarea
              ,.valueList .valuePair &gt; * + div &gt; select
              {
                  width: 100%;
                  max-width: 350px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -webkit-box-sizing:border-box;
              }
              .valueList .valuePair &gt; * + div &gt; input[type=radio],.valueList .valuePair &gt; * + div &gt; input[type=checkbox]
              {
                  width: auto;
              }
  
  
  table.display {
      width: 60%;
  }
  
  .dataTables_wrapper {
      text-align: left;
  }
  </code></pre>