如何将Bootstrap table-striped表格奇数行背景色设为透明？

Got it, let's break down why your custom background-color isn't working and fix it: Bootstrap's table-striped class uses a higher-priority CSS selector (table-striped>tbody>tr:nth-of-type(odd)) to style odd rows. Your custom style is getting overridden because its selector doesn't have enough specificity to beat Bootstrap's default rule.

Here are a few reliable solutions to set those odd rows to transparent:

1. Override with Higher-Specificity CSS #

Target your table directly (using an ID or custom class) combined with Bootstrap's selector to ensure your rule takes precedence. For example:

If your table has an ID like my-data-table:

#my-data-table.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: transparent;
}

Or if you're using a custom class for your table:

.custom-data-table.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: transparent;
}

No need for !important here—this selector matches Bootstrap's original specificity, and if your CSS loads after Bootstrap's, it will override the default style. If your CSS loads first, you can add !important as a last resort, but relying on specificity is cleaner.

2. Use AngularJS Dynamic Styling (For Conditional Cases) #

If you prefer handling it directly in your template (useful if you need conditional styling), use ng-style with $odd (from ng-repeat) to target odd rows:

<table class="table table-bordered table-striped">
  <tbody>
    <tr ng-repeat="item in yourDataArray" ng-style="$odd && {'background-color': 'transparent'}">
      <td>{{item.property1}}</td>
      <td>{{item.property2}}</td>
    </tr>
  </tbody>
</table>

If Bootstrap's style still overrides this, you can add !important inside the style object: {'background-color': 'transparent !important'}.

3. Remove table-striped (Simplest Option, If Applicable) #

If you don't actually need the striped effect at all, just remove the table-striped class from your table. Bootstrap's default table rows have a transparent background by default, so this would immediately fix the issue.

内容的提问来源于stack exchange，提问作者Rust Romania Player