TR背景设置异常求助：表格TR背景无法正常显示问题

I see the issue here—let's break down what's going wrong and how to fix it:

Key Problems in Your Current Code #

1. Bootstrap's Default Styles Are Overriding Yours: Bootstrap 3 has built-in styles for .table tr that have similar specificity to your custom CSS, which means your background color might not be applied.
2. Padding on <tr> Doesn't Work: Table rows (<tr>) don't support padding directly. Any padding you set here will be ignored—padding needs to go on table cells (<td>/<th>).
3. Border Spacing vs. Background: When using border-collapse: separate, the background of the row only covers the area behind the cells, not the gap between them. That's expected behavior, but it might look like the background isn't working if you're expecting it to fill those spaces.

Corrected Solution #

First, update your CSS to increase specificity (so it overrides Bootstrap) and move padding to the right elements:

/* Add a custom class to your table to boost specificity */
.table.custom-styled tr:nth-child(1),
.table.custom-styled tr:nth-child(2),
.table.custom-styled tr:nth-child(3) {
    background-color: #ccc; /* Use background-color instead of shorthand for clarity */
}

/* Apply padding to table cells instead of rows */
.table.custom-styled tr:nth-child(1) td,
.table.custom-styled tr:nth-child(1) th,
.table.custom-styled tr:nth-child(2) td,
.table.custom-styled tr:nth-child(2) th,
.table.custom-styled tr:nth-child(3) td,
.table.custom-styled tr:nth-child(3) th {
    padding: 20px;
}

/* Keep your existing table layout styles */
.table.custom-styled {
    border-collapse: separate;
    border-spacing: 10px;
}

Then modify your HTML to include the new custom class:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <table class="table custom-styled">
        <tr>
            <td>First Row Cell</td>
            <td>Another Cell</td>
        </tr>
        <tr>
            <td>Second Row Cell</td>
            <td>Another Cell</td>
        </tr>
        <tr>
            <td>Third Row Cell</td>
            <td>Another Cell</td>
        </tr>
        <tr>
            <td>Fourth Row (No Background)</td>
            <td>Another Cell</td>
        </tr>
    </table>
</div>

Why This Works #

• Higher Specificity: By adding the custom-styled class to your table, your CSS selector becomes more specific than Bootstrap's default .table tr, so your background color will take effect.
• Correct Padding Placement: Applying padding to <td>/<th> ensures the spacing inside cells works as expected.
• Clear Background Property: Using background-color instead of the shorthand background avoids accidentally overriding other background properties (like background-image) that Bootstrap might set.

Bonus: If You Want Background to Cover Spacing #

If you want the background color to fill the entire row including the gaps between cells, you'll need to switch to border-collapse: collapse and adjust padding/margins differently, since border-spacing won't work with collapsed borders. For example:

.table.custom-styled {
    border-collapse: collapse;
    width: 100%;
}

.table.custom-styled tr:nth-child(1),
.table.custom-styled tr:nth-child(2),
.table.custom-styled tr:nth-child(3) {
    background-color: #ccc;
}

.table.custom-styled td,
.table.custom-styled th {
    padding: 20px;
    border: 10px solid #fff; /* Simulate border-spacing with white borders */
}

This uses white borders around cells to create the spacing effect, while the row background fills the entire width.

内容的提问来源于stack exchange，提问作者Rohit Verma