In Bootstrap, you can use striped rows, which means adding zebra-striping to any table row within the <tbody>.

Column 1 Column 2 Column 3
text text text
text text text
text text text

But how about adding striping to columns? In Bootstrap, by default, you can not stripe table columns within the <tbody>. However, we can extend Bootstrap to create this effect.

Column 1 Column 2 Column 3 Column 4
text text text text
text text text text
text text text text

CSS

The CSS to stripe columns is pretty similar to how Bootstrap stripes rows.

This is how Bootstrap stripes rows:

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

This is the CSS we’ll use to stripe columns:

.table-striped-column > tbody > tr td:nth-of-type(odd) {
  background-color: #f9f9f9;
}

You can switch odd in the above example to even if you wish to stripe the columns starting with the second column, instead of the first.

.table-striped-column > tbody > tr td:nth-of-type(even) {
    background-color: #f9f9f9;
}

You can also change the background colour of the table column, so that the table rows and columns differ in colour. If you wish to do this, add both table-striped and table-striped-column as table classes.

Column 1 Column 2 Column 3 Column 4
text text text text
text text text text
text text text text

HTML

<div class="table-responsive">
<table class="table table-bordered table-striped-column">
  <thead>
    <tr>
          <th></th>
          <th></th>
          <th></th>
    </tr>
  </thead>
  <tbody>
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
  </tbody>
</table>
</div>

As stated in the CSS section, if you wish to zebra-stripe table rows and table columns, add both CSS classes to the table tag, like so:

<table class="table table-bordered table-striped table-striped-column">

.table-striped-column>tbody>tr td:nth-of-type(odd){background-color:#f9f9f9}.table-striped-column-2>tbody>tr td:nth-of-type(even){background-color:#fdffb6}