Question

问题背景：

我在这个网站上使用Bootstrap并且在每个表格padding上都有一个我想要添加<td>的购物车表。我认为这就像将样式添加到我的CSS然后将类添加到单元格一样简单，但它似乎不起作用，填充不会改变

标记：

这是我应用于每个表格单元格的CSS样式。

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

HTML：

HTML表格标记，其中应用了上述样式。

***注意：***我已将TableCell样式添加到该行的第三个表格单元格中。

<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用于从传递的Model列表中向上表添加行：

***注意：***我已将TableCell样式添加到该行的第三个表格单元格中。

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

};

Answer 1

它基本上是specificity issue。

默认情况下，Bootstrap设置以下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;
}

因此，您需要使用比.table>thead>tr>td更具体的选择器。

您可以将.TableCell的特异性提高到.table>thead>tr>td.TableCell并使用：

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

每个选择器的calculated specificity values为：

13 - .table>thead>tr>td
23 - .table>thead>tr>td.TableCell
10 - .TableCell

Answer 2

通过此

更新您的CSS

     .TableCell{
       padding:20px !important;
     }

无法在Bootstrap单元格上更改CSS样式

2 个答案: