使表格內容居中但左對齊

Question

我想使用表格爲圖表製作圖例。我創建了一個示例來展示問題。

https://jsfiddle.net/s3mf64gq

<div class="container"> 
    <div class="row"> 
    <div class="panel col-md-12"> 
     <table class="table borderless"> 
     <tbody> 
      <tr> 
      <td> 
       Jane - Software Engineer 
      </td> 
      <td> 
       John - Senior Marketing Executive 
      </td> 
      </tr> 
      <tr> 
      <td> 
       Teddy - CEO 
      </td> 
      <td> 
       James - Lecturer 
      </td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 
</div> 

我有2個要求：

1. 所有的項目都必須靠左對齊，
2. 容器必須是中心父

如何解決它？我卡住了。

挑戰是項目的長度不相等，否則我會簡單地在td上做文本對齊中心，然後解決。

Answer 1

由於.table類有100%預定width，則需要將其設置爲auto所以<table>將其內容的大小。

然後加入margin: 0 auto它將水平居中。

.table { 
    margin: 0 auto;   /* horizontally center */ 
    width: auto;    /* reset the built in value of 100% */ 
} 

Updated fiddle

棧片斷

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
 

 
<style> 
 
/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 

 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
    padding: 0; 
 
} 
 

 
.panel { 
 
    background: #eee; 
 
} 
 

 
.borderless td, 
 
.borderless th { 
 
    border: none !important; 
 
} 
 

 
.table { 
 
    margin: 0 auto; 
 
    width: auto; 
 
} 
 
</style> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="panel col-md-12"> 
 
     <table class="table borderless"> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       Jane - Software Engineer 
 
      </td> 
 
      <td> 
 
       John - Senior Marketing Executive 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       Teddy - CEO 
 
      </td> 
 
      <td> 
 
       James - Lecturer 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>