【发布时间】：2017-01-22 07:55:54
【问题描述】：
我无法将thead 与tbody 中的td 对齐。我尝试使用 display: table-header-group; 调整thead。我还从这里发现：Why isn't padding applied to table elements?，填充不适用于“表头组”。因此，当我尝试通过 CSS 向我的th 提供padding-left 时，什么都没有发生。我还尝试在我的<th>Quantity</th> <th>Amount</th> <th>Total</th> 之前使用更多<th></th>，以便添加“更多空间”。但是，我仍然无法将 thead 与我在 tbody 中的内容对齐。
有谁知道如何解决这个问题？如果可能的话，如果我做的不对，也请告诉我。任何帮助深表感谢。 谢谢！
截图和代码如下： thead is too left
这是我的代码：
<div class="table-responsive col-lg-12 " ng-show="ngCart.getTotalItems() > 0">
<table class="table-responsive table-striped ngCart cart summaryTable " >
<thead >
<tr cellpadding="10">
<th>Item</th>
<th>Quantity</th>
<th>Amount</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr ng-show="ngCart.getTax()">
<td></td>
<td></td>
<td>Tax ({{ ngCart.getTaxRate() }}%):</td>
<td>{{ ngCart.getTax() | currency }}</td>
</tr>
<tr ng-show="ngCart.getShipping()">
<td></td>
<td></td>
<td>Shipping:</td>
<td>{{ ngCart.getShipping() | currency }}</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total:</td>
<td>{{ ngCart.totalCost() | currency }}</td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="item in ngCart.getCart().items track by $index">
<td>{{ item.getName() }}</td>
<td>{{ item.getQuantity() | number }}</td>
<td>{{ item.getPrice() | currency}}</td>
<td>{{ item.getTotal() | currency }}</td>
</tr>
</tbody>
</table></div>
【问题讨论】：
-
您的问题与 css 相关。如果没有一个可以复制它的演示，我们可以在浏览器开发工具中进行检查，那么这里的任何人都无能为力。使用您的开发工具检查每个元素并查看适用于它的实际规则。您还可以实时编辑它们以尝试调整。然后当你找到修复它的东西时，添加一个覆盖 css 规则
-
如果可能的话，在 plunker 中创建一个简单的 html 演示以及所有 css
-
我使用的唯一 css 是 'summaryTable'，其中包含 'width: 100%;'使表格在移动设备上响应。其他类由插件本身提供。不过，好消息！我的朋友建议应用一个包含 'text-align: center;' 的 css到所有的标签，它工作！再次感谢所有回复的人:)