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?
Related
Say I have a header and a list of 10 rows. How would I change the text color of rows 1-3 using a pseudo class?
tr:nth-child(odd) {
background-color: #a9cdeb;
}
tr td:last-child{
font-style: italic;
}
tbody tr: {
color: #FF0004;
}
Here is a Fiddle
You should try this.
tr:nth-child(3), tr:nth-child(4), tr:nth-child(5){
color: red;
}
Demo
If my understanding is right, You can try this
tr:nth-child(odd) td{ /* select odd rows cell */
color: #fff; /* applied white color */
}
OR you can try this
tr:nth-child(-n+5) td{ /* this will include <th> rows so i have used -5 */
color: blue;
}
Updated Demo
Demo
You may try this
tr:nth-child(3),tr:nth-child(4),tr:nth-child(5){
color:red;
font-family: cursive;
}
It change both font and color.
DEMO
You can try this:
tr:nth-child(-n+5) td {
background-color: #a9cdeb;
}
Demo
Hi guys got a little design issue here.
I got this repeater that contains this table
<table class="Library">
<tr>
<td style="width: 170px; padding-left: 30px; height: 50px;"><%#RemoveTimeInDate(Eval("ValidTo").ToString())%></td>
<td style="width: 449px; height: 50px;"><a style="color: black" href="Info.aspx?id=<%# Eval("Id") %>"> <%# Eval("Title") %></a></td>
<td style="width: 2px; padding-left: 3px; height: 50px;">></td>
</tr>
</table>
CSS:
.Library {
font-size: 12px;
}
.Library a {
color: #007583;
}
.Library a:visited {
color: #007583;
}
.Library tr:nth-child(Odd) {
background-color: #FFFFCC;
}
To get this to work i haft to add another tablerow for the row colors to change.Is there a way to add different row colors when there is only 1 in the repeater
If you have only one row in a table, you can style it using the :only-child css selector.
You can also combine the use of :only-child and :nth-child as I did in this example on Codepen, to style both tables with just one row and tables with multiple rows, even with different colors for the first row in multiple rows case and the only row in the single row case. Here is the relevant CSS:
.Library tr:nth-child(Odd) {
background-color: #FFFFCC;
}
.Library tr:nth-child(Even) {
background-color: #CCFFFF;
}
.Library tr:only-child {
background-color: #CCFFFF;
}
Note that the :only-child selector must be after the :nth-child(Odd) one, to have precedence over it in the case of tables with a single row.
I dont get what you need exactly but you can use :nth-child(even) to start coloring from the first row.
here is the w3 example of even odd nth child
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
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>