【发布时间】：2020-07-14 05:57:34
【问题描述】：
我有两个使用 Bootstrap 3 的并排表格。唯一的问题是我希望将列“移入”到表格的中心，左右两端的间距相等（但是我不希望文本居中对齐）。
我可以通过将表格单元格包装在 <div> 中并给它们一些填充来做到这一点。但我不确定是否有更灵敏的方式来实现这一目标。
编辑：澄清一下，我知道我可以使用text-align: center 将列居中对齐，这会将内容移向中心。但我真的不希望文本居中。我只是想让内容向内移动。
下面是一个例子。表 1 在我添加任何填充之前。表 2 在第一个 <div> 中添加了填充。表 2 看起来更接近我想要的，第一列移向中心。但理想情况下，我希望两列的左侧和右侧有相等的空白。有什么方法可以在不滥用 CSS 或破坏 Bootstrap 响应能力的情况下实现这一目标？
td>div {
padding-left: 35px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-condensed table-borderless">
<thead>
<tr>
<th>Table 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Some Field Name
</td>
<td>428 mg/L</td>
</tr>
<tr>
<td>
Some Field Name
</td>
<td>428 mg/L</td>
</tr>
<tr>
<td>
Some Field Name
</td>
<td>428 mg/L</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Table 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
Some Field Name</div>
</td>
<td>
<div>
428 mg/L</div>
</td>
</tr>
<tr>
<td>
<div>
Some Field Name</div>
</td>
<td>
<div>
428 mg/L</div>
</td>
</tr>
<tr>
<td>
<div>
Some Field Name</div>
</td>
<td>
<div>
428 mg/L</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>【问题讨论】：
标签： html css twitter-bootstrap-3