CODEWITHSUNDEEP
htmlcssangularjs
zwxzwx
zwxzwx

Reputation: 37

Align thead with td in tbody

I have trouble aligning the thead with the td in tbody. I've tried adjusting the thead using display: table-header-group;. I also found out from here: Why isn't padding applied to table elements?, that padding does not work on 'table-header-group'. Thus when I tried providing padding-left to my th via CSS, nothing is happening. I've also tried using more <th></th> before my <th>Quantity</th> <th>Amount</th> <th>Total</th> so that 'more space' is added. However, I am still not able to align the thead with my content in tbody.

Does anyone know how to fix this issue? If possible, please also let me know if I am not doing things right. Any help is much appreciated. Thank you!

Screenshot and code is provided below: thead is too left

Here is my code:

<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>

Upvotes: 2

Views: 3884

Answers (1)

bxorcloud
bxorcloud

Reputation: 689

what you did was correct. all you need is to center the text alignment of your thead. or just align the tbody left.

Upvotes: 1

Related Questions