使表格内容居中但左对齐

Question

我想使用table为图表做一个图例。我创建了一个示例来说明问题。

https://jsfiddle.net/s3mf64gq

mockWithValue

我有2个要求：

1. 所有项目必须与左侧对齐
2. 容器必须居中于父

如何解决？我被卡住了。

挑战是项目的长度不相等，否则我只需在<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> 上做文本对齐中心然后就解决了。

Answer 1

由于<CheckBox id="ch1" text="Test" selected="false" select ="checkDone" value="{someModel>/enabledValue}" enabled="true" /> <Input id="i1" enabled="{someModel>/enabledValue}"></Input> 类预定义.table width，因此您需要将其设置为100%，以便auto的内容按其内容调整大小

然后通过添加<table>，它将水平居中。

margin: 0 auto

Updated fiddle

Stack snippet

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;