I want to change the colors of Bootstrap table-striped. I have read this question: Bootstrap table striped: How do I change the stripe background colour?. So I can change it with, for example:
.table-striped > tbody > tr:nth-child(2n+1) > td,
.table-striped > tbody > tr:nth-child(2n+1) > th
{
background-color: red;
}
However, my apps needs a different color for the "selected row". So I have a CSS class called "selectedRow" that we add it to the tr that are selected. The property is:
.selectedRow td
{
background-color: blue;
color: black;
}
I need that for the selected row, background color takes precedence over the Bootstrap table-stripped. That is...for the tr that I add the css class selectedRow I want them blue, not red. Note that I CANNOT use !important here (there is a reason for this).
So is there another way I can do to change Bootstrap table-striped so that my selectedRow css class takes precedence?
You have to be more specific than the Bootstrap styles.
For example like this:
.table-striped>tbody>tr.selectedRow:nth-child(odd)>td,
.table-striped>tbody>tr.selectedRow:nth-child(even)>td {
background-color: #819bbf;
color: black;
}
I hope you get the idea.
Here is a code from the table.less:
.table-striped {
> tbody > tr:nth-child(odd) {
> td,
> th {
background-color: #table-bg-accent;
}
}
}
Therefore you can use:
.table-striped > tbody > tr:nth-child(odd) > td {
background-color: #819bbf;
color: black;
}
JSBin
Related
I wish to add custom coloring to a cell.
tried using
`styles: [`
:host /deep/ ng2-smart-table tbody > tr > td:first-child {
color: red;
}
`]`
but this changes the color for the entire first column
If you want to color the first cell not only the first column you need to add first-child to tr as well:
:host /deep/ ng2-smart-table tbody > tr:first-child > td:first-child {
color: red;
}
I styled my Table with different colors on every row (odd/even), but when hovering over one row, it should change it's color. It works well on PC but for some reason it changes every of the rows' colors to the same color in my iPhone when clicking one of the rows. This is an example using the same CSS I used.
.tablestyle tr
{
background: #b8d1f3;
}
.tablestyle tr:nth-child(odd)
{
background: #b8d1f3;
}
.tablestyle tr:nth-child(even)
{
background: #dae5f4;
}
.tablestyle tr:hover
{
background: #7CAAE9;
}
.tablestyle tr:first-of-type
{
background: #2470D5;
}
<table class="tablestyle" border="1" style="width:70%">
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
</table>
I couldn't find anything wrong with this code, but why then it changes every of the rows' colors?
This is a general question, given a html component (a table for example), I want to add a new css class overwriting the current ones. For example I want to overwrite the td hover of the following table, adding a new class in order to do not affect the other tables that use the classes in common:
html (using bootstrap classes)
<table id="calDate" class="table table-striped table-bordered table-condensed table-hover alignCenter">
<tbody>
<tr>
<td>
<tbody>
</tbody>
table>
css
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
max-width: 90%;
margin-bottom: 5px;
}
.table th,
.table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
background-color: #f5f5f5;
}
I try to overwhrite the last class creating a new one named .alignCenter, trying to change the td hover behavior and also the text-align, the aligment worked but the mouse over it doesn't worked:
.alignCenter {
}
.alignCenter-hover tbody tr:hover > td,
.alignCenter-hover tbody tr:hover > th {
background-color: #df8505;
}
.alignCenter th, .alignCenter td{
text-align: center;
}
What's the usual way to create a new css class overwhiting the existent classes?
How can I use the new created css class to change the td hover behavior for example change the background color?
In the example the class .table has max-width: 100%; and it's defined again below with max-width: 90%;. Which max-width is used in the table, and why?
Ok, let me answer your questions one by one:
-1. What's the usual way to create a new css class overwhiting the existent classes?
You can overwrite those by either modifying the classes themselves or add a different value for another class on the same element (or inline style them).
-2. How can I use the new created css class to change the td hover behavior for example change the background color?
Simply do this:
tr:hover td {
/* do hover stuff */
}
-3. In the example the class .table has max-width: 100%; and it's defined again below with max-width: 90%;. Which max-width is used in the table, and why?
In CSS it's always the most recently (last) command that will "win". You can, however, override that using !important like this:
.table {
/* ... */
max-width: 90% !important;
/* ... */
}
And more: get rid of the table-hover, it's unnecessary; instead set up its hovered variation like this:
.table:hover {
/* stuff goes here */
}
Take a look at this:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
the class attributes at the class below the other class will count (so the order of the stylesheet matters), else you can use ex:
max-width:90%!important;
or choose are more specific selector
Thing is,
You have to create new class.
.old
{
//already have
}
.new
{
// do your stuff with !important so it will take this
// background-color:#fff !important
}
or
td:hover > .new
{
// do your stuff
}
I want to have my table rows highlighted on mouse over, but I have yet to find a way to do it that isn't using Javascript. Is this not possible in CSS?
I've tried this:
tr:hover {
background: #000;
}
But that doesn't work. Using td:hover works, but I want to change the background colour of the whole table row.
Is there a pure CSS/HTML way to do it, or am I going to have to resort to Javascript?
<tr>s themselves are very hard to access with CSS, try tr:hover td {background:#000}
You could try:
tr:hover {
background-color: #000;
}
tr:hover td {
background-color: transparent; /* or #000 */
}
JS Fiddle demo.
I had the same problem:
tr:hover { background: #000 !important; }
allone did not work, but adding
tr:hover td { background: transparent; }
to the next line of my css did the job for me!!
My problem was that some of the TDs already had a background-color assigned and I did not know that I have to set that to TRANSPARENT to make the tr:hover work.
Actually, I used it with a classnames:
.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }
Thanks for these answers, they made my day!! :)
This will work:
tr:hover {
background: #000 !important;
}
If you want to only apply bg-color on TD then:
tr:hover td {
background: #c7d4dd !important;
}
It will even overwrite your given color and apply this forcefully.
tr:hover td.someclass {
background: #EDB01C;
color:#FFF;
}
only someclass cell highlight
tr:hover td {background-color:#000;}
You can give the tr an id and do it.
tr#element{
background-color: green;
cursor: pointer;
height: 30px;
}
tr#element:hover{
background-color: blue;
cursor: pointer;
}
<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>
its easy . Just add !important at the end of your css line :
tr:hover { background: #000 !important; }
Try it
<!- HTML -->
<tr onmouseover="mOvr(this,'#ffa');" onmouseout="mOut(this,'#FFF');">
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.bgColor = clrIn;
}
}
</script>
My css is located at http://sillybean.net/css/seaglass.css and i want to use this css for only one of html table, On the same page i have multiple html tables so i do not want to affect other html tables. What is the fastest way to do it with less modification on http://sillybean.net/css/seaglass.css ?
Can you just apply a class to the table you want to affect, then use that class in your CSS?
In your HTML, you can put:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
And then, add the class selector to your CSS:
table.mytable { border-collapse: collapse; border: 1px solid #839E99;
background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
Define an ID or CLASS in your CSS that will affect the table in question.
Then, in your HTML code, say
<table id="theid"... />
or
<table class="theclass" ... />
The CSS ID looks like
#theid
{
//attributes
}
Classes look like:
.theclass
{
//attributes
}
This is exactly what id and class attributes are for. If you can't change the markup (like styling myspace) then you need to use selectors to target the one table more precisely. The choice of selectors is something you'll need to decide yourself.
For Multiple Table and Classes
HTML Table
<table id="tableId1">
--Table Content--
</table>
<table id="tableId2">
--Table Content--
</table>
<table class="tableClass1">
--Table Content--
</table>
<table class="tableClass2">
--Table Content--
</table>
CSS Script
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
Here are class selectors and markup that will style the first table but not the second:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
Or you can use an ID selector in a similar fashion:
<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>
Sometimes a religious war breaks out about which of these two approaches to use. Either is fine for your needs. According to the spec, you can only put a given ID on at most one element in your HTML (but most browsers allow you to break that rule).
Apply the Class name to the table on which you want to apply css rest is fine...
While you should add a class to the table you want to affect, let's assume you can only modify the css. In that case you can get pretty fancy with selectors. But not all the browsers support them. You can see that the CSS 2 selectors don't support the n-th child concept. Otherwise, if you had html like:
<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>
You could target the first with CSS2 selectors, but the second and third can only be targeted with CSS3 ones.
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
Select table by class for styling a desired table e.g if you have table:
<table class="tableOne"></table>
<table class="tableTwo"></table>
Then in CSS, you will use something like this:
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}