With Bootstrap class table-striped, every other row in my table has a background colour equal to #F9F9F9. How can I change this colour?
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
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: red;
}
add this line into your style.css after main bootstrap.css
or you could use (odd) or (even) instead of (2n+1)
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;
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;
}
Easiest way for changing order of striped:
Add empty tr before your table tr tags.
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;
}
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);
}
.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.
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;
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:
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.
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;
}
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.
You can override that tag in your CSS like so:
table {
--bs-table-striped-color: #85d1ee;
}
Bootstrap 5 using
--#{$variable-prefix}table-accent-bg
take into consideration
.table-striped>tbody>tr:nth-child(odd) > td:hover {
--#{$variable-prefix}table-accent-bg: #000099;
}
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.
The code below solved my project
.table {
--bs-table-striped-bg: #efefef !important;
}
Related
I have a Vuetify v-simple-table where I need to render row css differently depending on whether a task is complete or not.
I can conditionally render the background color with the following code.
<tr :class="[done? 'greenBG' : 'whiteBG']">
The css is straight forward.
.greenBG {
background-color: #79ecc5;
}
.whiteBG {
background-color: white;
}
However, I cannot seem to disable the defualt :hover css. I tried connecting it to the class with this css.
tr.greenBG:hover { background-color: green }
If anyone can help me achieve this I'd be grateful.
Try with the !important property to ensure you override any conflicting vuetify CSS
tr.greenBG:hover {
background-color: green !important
}
if you really want to avoid using !important you need to be as specific as vuetify's CSS selector:
.v-data-table__wrapper
table
tbody
tr.greenBG:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
background: green;
}
I have a CSS stylesheet as follows:
.commandsTable {
color: whitesmoke;
background-color: black;
margin-left: auto;
margin-right: auto;
}
.commandsTable td {
background-color: #039be5;
}
.commandsTable tr:hover {
background-color: black;
}
As one can see, '.commands table' is repeated twice to style the td and tr elements respecitvely.
So...
Is there a way of nesting dot (.) operators in CSS in order to prevent repetitive code entry?
You can do that only with a preprocessor like sass
In pure css you can not nest elements
Here's a link that would perfectly suit your requirement:http://tabatkins.github.io/specs/css-nesting/
While you can go for SASS, there is another option which is cssnext and you should definitely check it out.
Here's a link for it:http://cssnext.io/features/
I understand CSS basics, but I keep running into trouble with conflicting styles. Consider the following styles.
First, the default font color in my style sheets is black. I want that color applied to all picture captions - unless they're contained in divs with a class CoolL or CoolR...
.CoolL .Caption, .CoolR .Caption { color: #900; }
Now all the captions in the Cool series have brown text. But there are situations where I want the captions to have a black background with white text, so I created this rule:
.Black { background: #000; color: #fff; }
Now consider the following HTML. Class Caption by itself should have black text. However, this is inside a div with a class CoolR, so it displays brown text instead. But I added the class Black to the last div, which should change the background to black and the text color to white...
<div class="CoolR Plus Max300">
<div class="Shadow2">
<img src="">
<div class="Caption Black">Text</div>
</div>
</div>
In fact, the background is displaying black, but the text color is still brown.
I get these problems all the time, and the only way I can fix them is to write long, detailed styles, like this...
.Black, .Caption .Black, .CoolR .Caption.Black, .EverythingElseThatCouldBeBlack .Black { background: #000; color: #fff; }
What am I missing? Thanks.
I think you are over complicating things. This will become a maintenance issue as you add more styles. I would define separate classes and keep things simple. It's also important to understand CSS specificity.
.caption {
color: #000;
}
.cool-caption {
color: #900;
}
.caption-with-background {
background-color: #000;
color: #fff;
}
You could try :
.Black { background: #000 !important; color: #fff !important; }
There are a few fixes, but as previously recommended you should mark all of the settings you want to override previous ones with !important. With that, your code would look like this:
.Black {
background: #000;
color: #fff;
}
Also, not sure if you asked this, but you can apply CSS to all components by using the *, like so:
* {
//blahblahblah
}
you are defining the first case with a descendant selector which overrides the second class, which is merely a class. every answer given already will work but are entirely unnecessary. just add this to your style sheet:
.CoolR1 .Black, .Black{ background: #000; color: #fff;}
/** you could also chain your classes for specificity power **/
.Black.Caption{color:#fff}
that should do it. you can read more about selectors here:
http://docs.webplatform.org/wiki/css/selectors
I think that generally a more specific rule overrides a more general one, thus the more specific '.CoolR .Caption' is overriding the more general .Black. You'll probably be able to override this with !important, but a better style might be to reduce the complexity of your rules:
.Cool .caption { color: #900; }
.Cool .caption.black { color: background: #000; color: #fff; }
And put .L and .R in separate classes
.Cool.L { . . . } /* For things specific to CoolL, but not CoolR */
.Cool.R { . . . } /* and vice-versa */
I've got a table that I'm using for a check list. For a collection.
Basically what I'm looking for is a way to have the table hover color GREEN if it's an item I own, and red, if its an item I don't
I'm very new to CSS and I'd appreciate any help if possible.
Here is my code (Messy)
**http://jsfiddle.net/6TYBb/1/**
Simplest way: http://jsfiddle.net/9gmrG/
Sub Class out the td so you have owned and not owned. Then trigger them on hover.
tr:hover{
background-color: #ccc;
}
tr:hover td.owned{
background-color: green;
}
tr:hover td.notowned{
background-color: red;
}
You can use two CSS classes to style the rows.
tr.own:hover { background: green; }
tr.not:hover { background: red; }
http://jsfiddle.net/6TYBb/215/
How is this table generated? You could add different classes to the table rows to indicate which hover style you wish to use. Example:
http://jsfiddle.net/BkmaW/
tr:hover {
color: red;
}
tr.true:hover {
color: green
}
edit: removed "!important", had added it without reason.
A site-wide style sheet has a directive of the form
#outerdiv tr:nth-child(2n) {
background-color: #cccccc;
}
which I would like to override for the tables contained inside div #innerdiv, which in turn is contained inside div #outerdiv.
The only thing I've found works is:
#innerdiv tr:nth-child(2n) {
background-color: #ffffff;
}
Which seems to me excessively specific, and probably very fragile.
Is there some other way to just rescind the site-wide directive? Alternatively, is there a way to specify a background color for all the table rows within #innerdiv.
FWIW, the following does not work:
#innerdiv tr {
background-color: #ffffff; !important;
}
try this
#innerdiv tr {
background-color: #ffffff !important;
}
Depending on how your tables are nested, you can use the following code should the first table is a direct child of #outerdiv:
table tr {
background-color: #fff
}
#outerdiv > table tr:nth-child(2n) {
background-color: #cccc;
}