如何让表格（数据表）左对齐？

Question

给定以下代码，如何在不使用 float:left 的情况下左对齐表格？我认为将 text-align:left 应用于表格的父元素可以完成这项工作，但事实并非如此。

http://jsfiddle.net/william/B4qJG/1

HTML:

<div class="valueList">
 <div class="valuePair">
   <label>Assets</label>

  <div>
    <div>
      <div class="dataTables_wrapper">
        <table cellspacing="0" style="border-collapse:collapse;" class="display">
          <thead>
            <tr>
              <th scope="col" class="sorting_asc" style="width: 406px;">Name</th>

              <th scope="col" class="sorting" style="width: 440px;">AssetNumber</th>

              <th scope="col" class="sorting" style="width: 305px;">Action</th>
            </tr>
          </thead>

          <tbody>
            <tr class="odd">
              <td class=" sorting_1">Chair</td>
              <td>2323424</td>
              <td><a href="#">Remove</a></td>
            </tr>

            <tr class="even">
              <td class=" sorting_1">Table</td>
              <td>34345345</td>
              <td><a href="#">Remove</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div><input type="button" value="Add Asset" />
  </div>

  <div class="clear"></div>
</div>
</div>

CSS:

.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 > div, .valueList .valuePair > label
        {
            float: left;
            padding: 0.3em 0;
            line-height: 2em;
            border: 1px solid transparent;
        }

        .valueList .valuePair > *:first-child
        {
            width: 20%;
            /*margin-right: 1%;*/
            padding-right: 1%;
            font-weight: bold;
        }

        .valueList .valuePair > * + div
        {
            width: 75%;
            border-color: white;
            padding-left: 1%;
        }

        .valueList .valuePair > div.clear
        {
            padding: 0;
            border: 0;
            height:0;
        }

            .valueList .valuePair > * + div > input[type=text],
            .valueList .valuePair > * + div > textarea
            ,.valueList .valuePair > * + div > 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 > * + div > input[type=radio],.valueList .valuePair > * + div > input[type=checkbox]
            {
                width: auto;
            }


table.display {
    width: 60%;
}

.dataTables_wrapper {
    text-align: left;
}

Answer 1

table.display {
    width: 60%;
    margin: 0;  /* <- works for me this way ****/
}

Answer 2

嗯，这可能有用。

position:absolute;
z-index:2;
left:50%;
top:50%;

根据您希望放置表格的位置编辑左侧和顶部的百分比。

Answer 3

更改 HTML 文件中的以下行。将左边距设置为 0。

.main-container {
  max-width: 940px;
  margin-left: 0;
  margin-right: auto;
}