CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user1352057
user1352057

Reputation: 3182

Unable to change <td> CSS styling on Bootstrap cell

Question Background:

I'm using Bootstrap on this site and have a shopping cart table that I want to add padding too on each table <td> cell. I thought this would be as easy as adding the styling to my CSS then adding the class to the cells but it does not seem to be working, the padding doesn't change

Markup:

This is the CSS styling I'm applying to each table cell.

.TableCell{
  padding:20px 20px 20px 20px;
 }

HTML:

HTML Table markup where the above styling is applied.

***Note:***I have added the TableCell styling to the third table cell of the row.

<table id="Table1" class="table table-bordered TableSection">
    <thead>
        <tr>
            <td style="display:none;">id</td>
            <td></td>
            <td class="TableCell"><b>Item</b></td>
            <td><b>Brand</b></td>
            <td><b>Unit Price</b></td>
            <td class="TableCell"><b>Quantity</b></td>
            <td></td>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JQuery used to add rows to the above table from the passed Model list:

***Note:***I have added the TableCell styling to the third table cell of the row.

var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {

    var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
    var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
    var selectors = '<input id="demo1" type="text" value="' + productQty + '" name="demo1">'

    var $html = $('<tr class="item">' +
    '<td class="prodId" style="display:none;">' + productId + '</td>' +
    '<td class="prodImage hidden-xs">' + image + '</td>' +
    '<td class="prodName TableCell">' + productName + '</td>' +
    '<td class="prodBrand">' + productBrand + '</td>' +
    '<td class="prodPrice"> £' + productPrice + '</td>' +
    '<td class="prodQty">' + selectors + '</td>' +
    '<td>' + button + '</td>' +
    '</tr>');

    $('#Table1 > tbody:last').append($html);

};

Upvotes: 1

Views: 1168

Answers (2)

Front End Developer
Front End Developer

Reputation: 41

Update your css by this

     .TableCell{
       padding:20px !important;
     }

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240948

It's basically a specificity issue.

By default, Bootstrap sets the following CSS:

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th,
.table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

Therefore you need to use a selector that is more specific than .table>thead>tr>td.

You could increase the specificity of .TableCell to .table>thead>tr>td.TableCell and use:

.table>thead>tr>td.TableCell {
    padding: 20px;
}

The calculated specificity values of each selector are:

  • 13 - .table>thead>tr>td

  • 23 - .table>thead>tr>td.TableCell

  • 10 - .TableCell

Upvotes: 1

Related Questions