tbodyのtdとのアラインメント

Question

theadをtdと一致させるのに問題があります。tbodyです。私はディスプレイを使ってtheadを調整しようとしました：table-header-group;。私はまたここから見つけた：Why isn't padding applied to table elements?、そのパディングは 'テーブルヘッダーグループ'で動作しません。したがって、を私のthにで送ってみたところ、CSSは何も起こっていません。私はまた<th>Quantity</th> <th>Amount</th> <th>Total</th>の前にもっと<th></th>を使ってみましたので、 'more space'が追加されました。しかし、私はまだtbadの内容とtheadを調整することはできません。

誰でもこの問題を解決する方法は知っていますか？可能であれば、私が正しいことをしていないかどうか教えてください。どんな助けも大歓迎です。 ありがとうございました！

スクリーンショットとコードを以下に示す。ここで 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

あなたが何をしたか正しかったです。あなたが必要とするのは、あなたのテッドのテキストの配置を中心にすることだけです。または左にtbodyを整列させます。