使表格内容居中但左对齐

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>