I made a bootstrap table where I get information to fill up from a stored procedure with some indication where some text are in color or even background.
The trouble is when I want to print, there isn't any color. I can make a file print.css where I'll tell the background color for header and title, but how about the table when i don't even know what will be inside depending of the stored procedure? And more, the table isn't separated well between each pages where it cut my table or words.
This is what I've done until now from my page print.css where I use already td or th for the table :
.table tr {
page-break-after: always;
}
#media print {
#page {
size: letter;
margin: 1cm;
}
}
body{
-webkit-print-color-adjust:exact;
}
.panel-heading {
background-color: #54A0EB !important;
}
.panel-title {
color: #FFFFFF !important;
font-weight: bold !important;
}
#media print {
.table td,
.table th {
background-color: inherit !important;
}
.table-stripe {
background-color: #dedede !important;
}
}
Thank you for your help, really appreciate it!
My css bootstrap was double that's why i can't see color. Everything is fine now.
So I have the following problem, I want to be able to select a row in a table, and when I do that row gets an active background color. So far no problems. However, if the user should specify the background color to be transparent or set the opacity in rgba()-string to 0 then I want to display the underlaying row-color.
Now if I use a mixing I could style my css in different ways. But how can I get the opacity from the rgba-string to determine whether the string should be transparent or not? Does regex work within a mixin?
I.e.: I would something like (I know, the regex part is js but somthing similar for css/mixin):
#mixin active-background-color($activeBackgroundColor){
#if ($activeBackgroundColor.replace(/^.*,(.+)\)/,'$1') == 0) {
background-color: none;
} #else {
background-color: $activeBackgroundColor
}
}
So the solution turned out to be the following (should anyone be interested):
#mixin active-background-color($color) {
$alphaVal: alpha($color);
#if ($alphaVal== 0){
background-color: inherit;
} #else {
background-color: $color;
}
}
Link to the solution I used: The Sass Way
Sounds like you should simply define the selection on the tr
and add the user picked color to the td:
tr { background-color: whitesmoke; } // default row color
tr:hover { background-color: #ccc; } // default row selected color
tr:hover td { background-color: tomato } // user defined selected color
// if the user selects a transparent selection color
// the default row selected color will show
table { width:100%; border-collapse: collapse;}
tr { cursor: pointer; }
td { font:1rem sans-serif; padding:.2rem; }
tr { background-color: whitesmoke; }
tr:hover { background-color: #ccc; }
tr:hover td { background-color: tomato }
tr:last-of-type:hover td { background-color: transparent }
<table>
<tr><td>One</td><td></td><td></td><td></td></tr>
<tr><td>Two</td><td></td><td></td><td></td></tr>
<tr><td>Three</td><td></td><td></td><td></td></tr>
</table>
I have a chunk of CSS that I want to "scope" to a specific block of HTML. I'm generating a unique ID and then setting it on the block of HTML and then would like to wrap the chunk of CSS with the same ID so that those selectors can't match sibling or parent elements. I don't know the contents of the chunk of CSS. Given a chunk of CSS:
.container {
background-color: black;
}
.container .title {
color: white;
}
.container .description {
color: grey;
}
I need it to come out like this:
.theme0 .container, .theme0.container {
background-color: black;
}
.theme0 .container .title, .theme0.container .title {
color: white;
}
.theme0 .container .description, .theme0.container .description {
color: grey;
}
Is there any way to do this with LESS? The first selector is easy, just wrap the CSS chunk with '.theme0 {' + cssChunk + '}'. But I haven't been able to figure out a way to prepend '.theme0' to all of the selectors without the space.
EDIT:
So I should clarify that our intentions are to build such a system into our build process / dependency system. We're attempting to scope a chunk of css to a react component. We have a couple different approaches we're trying out, this is just one of them. Point is, the CSS and HTML we're trying to scope could be anything, we have no control or knowledge of it. The first pattern can easily be achieved by prepending .uniqueID { and appending }. This gives .uniqueID .someSelector {}. I'm wondering if it's possible to do a similar thing but get .uniqueID.someSelector {}? Ideally without having to write the original chunk of CSS with knowledge of our scoping system.
Assuming the component styles are in a separate CSS file, i.e.:
// component.css
.container {
background-color: black;
}
.container .title {
color: white;
}
.container .description {
color: grey;
}
The wrapper code could be:
.theme0 {
#import (less) "component.css";
&.container:extend(.theme0 .container all) {}
}
in less you can nest selectors for selecting inside that element like:
.theme {
color: black;
.container {
color: blue;
}
}
This wil generate:
.theme {
color:black;
}
.theme .container {
color:blue;
}
Creating elements that are connected is easy enof:
.test#badge will select a class test width an id badge
In less this is dont with the & symbol. (this selects the starting property)
.test {
color: blue;
&#badge {
color:black;
}
}
Compiles to:
.test {
color: blue;
}
.test#badge {
color: black;
}
And for the final selector:
To get the output of .test, .container use the function: .test:extends(.container);
.test {
color: black;
&:extends(.conatiner);
}
.container {
color: pink;
}
Compiles to:
.test {
color: black;
}
.test, .container {
color: pink;
}
You can even extend multiple ones in a single line:
.test:extends(.oclas, .tclss);
and its wil work as abose only for both classes. So outputed selectors would be .test, .oclass and .test, .tclass
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;
}
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.