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

考虑下面的代码，我怎么离开对齐表格，而无需使用float:left？我想申请text-align:left表会做这项工作的父元素，但事实并非如此。如何让表（数据表）左对齐？

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; 
}

来源

2012-02-21 William Niu

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

来源

2012-02-21 01:50:43

billiantly发现！ – 2012-02-21 02:37:35

嗯这可能工作。

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

根据要放置表的位置编辑左侧和顶部％。

来源

2012-02-21 01:46:40 Bert

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

回答

相关问题