如何强制Bootstrap嵌套表格的内层表格无条纹与边框？

The issue here is that Bootstrap's table-striped class uses a CSS selector that targets all <tr> elements inside the outer table's <tbody>—including those in your nested inner table. The table-borderless class removes borders but doesn't override the stripe styling because of CSS selector specificity.

Here's how to fix it:

1. Add Custom CSS to Override Stripes for Inner Tables #

Add this CSS rule to your stylesheet (or in a <style> tag) to explicitly remove stripe backgrounds from any nested tables:

.table-striped > tbody > tr > td > .table tbody tr {
    background-color: inherit; /* Matches the parent cell's background */
}

This selector targets rows inside tables nested within a table-striped cell, ensuring their background doesn't inherit the stripe pattern.

2. Optional: Use a Custom Class for Cleaner Targeting #

If you want more control, add a custom class to your inner table (like inner-table) and target it specifically:

<table class="table table-bordered table-sm table-striped">
  <tbody>
    <tr>
      <td>
        <table class="table table-sm table-borderless inner-table" style="margin: 0">
          <!-- Inner table content goes here -->
        </table>
      </td>
    </tr>
  </tbody>
</table>

Then use this more concise CSS:

.inner-table tbody tr {
    background-color: inherit;
}

Why This Works #

By setting background-color: inherit, the inner table rows will take the background color of their parent cell (which matches the outer table's row background, breaking the stripe pattern). If you prefer, you can use transparent instead to let the outer table's row show through, but inherit ensures consistency with your existing styling.

You can also add border: none !important to the inner table's rows if you need to double down on removing borders, though table-borderless should already handle that in most cases.

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