With Bootstrap class table-striped
, every other row in my table has a background colour equal to #F9F9F9
. How can I change this colour?
This question is related to
css
twitter-bootstrap
html-table
If using SASS and Bootstrap 4, you can change the alternating background row color for both .table
and .table-dark
with:
$table-accent-bg: #990000;
$table-dark-accent-bg: #990000;
With Bootstrap 4, the responsible css configuration in bootstrap.css
for .table-striped
is:
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
For a very simple solution, I just copied it into my custom.css
file, and changed the values of background-color
, so that now I have a fancier light blue shade:
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(72, 113, 248, 0.068);
}
I found this checkerboard pattern (as a subset of the zebra stripe) to be a pleasant way to display a two-column table. This is written using LESS CSS, and keys all colors off the base color.
@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);
@other-row: darken(@row-color, 10%);
tbody {
td:nth-child(odd) { width: 45%; }
tr:nth-child(odd) > td:nth-child(odd) {
background: darken(@row-color, 0%); }
tr:nth-child(odd) > td:nth-child(even) {
background: darken(@row-color, 7%); }
tr:nth-child(even) > td:nth-child(odd) {
background: darken(@other-row, 0%); }
tr:nth-child(even) > td:nth-child(even) {
background: darken(@other-row, 7%); }
}
Note I've dropped the .table-striped
, but doesn't seem to matter.
Looks like:
Delete table-striped Its overriding your attempts to change row color.
Then do this In css
tr:nth-child(odd) {
background-color: lightskyblue;
}
tr:nth-child(even) {
background-color: lightpink;
}
th {
background-color: lightseagreen;
}
If you are using Bootstrap 3, you can use Florin's method, or use a custom CSS file.
If you use Bootstrap less source instead of processed css files, you can directly change it in bootstrap/less/variables.less
.
Find something like:
//** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9;
Add the following CSS style after loading Bootstrap:
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: red; // Choose your own color here
}
Add empty tr
before your table tr tags.
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: #e08283;
color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
background-color: #ECEFF1;
color: white;
}
Use 'even' for change colour of even rows and use 'odd' for change colour of odd rows.
I came across this post while hunting down a solution for myself. By using chrome's inspector, I was able to determine that the striped color was being applied from the --bs-table-striped-color
tag.
overriding that tag in your css:
<style scoped>
table {
--bs-table-striped-color: #85d1ee;
}
</style>
You have two options, either you override the styles with a custom stylesheet, or you edit the main bootstrap css file. I prefer the former.
Your custom styles should be linked after bootstrap.
<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">
In custom.css
.table-striped>tr:nth-child(odd){
background-color:red;
}
I know this is an old post, but changing th or td color is not te right way. I was fooled by this post as well.
First load your bootstrap.css and add this in your own css. This way it is only 2 lines if you have a hovered table, else its only 1 line, unless you want to change odd and even :-)
.table-striped>tbody>tr:nth-child(odd) {
background-color: LemonChiffon;
}
.table-hover tbody tr:hover {
background-color: AliceBlue;
}
If you want to actually reverse the colors, you should add a rule that makes the "odd" rows white as well as making the "even" rows whatever color you want.
Don't customize your bootstrap CSS by directly editing bootstrap CSS file.Instead, I suggest to copy paste bootstrap CSS and save them in a different CSS folder and there you can customize or edit stylings suitable to your needs.
Source: Stackoverflow.com