将thead与tbody

Question

我无法将thead与td中的tbody对齐。我尝试使用 display：table-header-group; 调整thead。我也从这里发现：Why isn't padding applied to table elements?，填充不适用于＆table; header-group-group＆＃39;。因此，当我尝试通过 CSS 向padding-left提供th时，一切都没有发生。我还尝试在<th></th>之前使用更多<th>Quantity</th> <th>Amount</th> <th>Total</th>，以便更多空间＆＃39;}被添加。但是，我仍然无法将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>

Answer 1

你所做的是正确的。你所需要的只是使你的文本对齐居中。或者只是将左侧对齐。