Is it possible to style alternate table rows without defining classes on alternate <tr> tags?
With the following table, can CSS define alternate row styles WITHOUT having to give the alternate rows the class "row1/row2"? row1 can be default, so row2 is the issue.
<style>
.altTable td { }
.altTable .row2 td { background-color: #EEE; }
</style>
<table class="altTable">
<thead><tr><td></td></tr></thead>
<tbody>
<tr><td></td></tr>
<tr class="row2"><td></td></tr>
<tr><td></td></tr>
<tr class="row2"><td></td></tr>
</tbody>
</table>
tr:nth-child(even) { background: #FFF; }
tr:nth-child(odd) { background: #EEE; }
Does not work in IE, but it's a purely presentational thing, the content will work fine anyway, so I don't think it's a huge issue -- depending on the % of regular IE users on your site.
Yes! You can do it with pure CSS and no classes on browsers that support the "+" selector of CSS:
.altTable tr td,
.altTable tr+tr+tr td,
.altTable tr+tr+tr+tr+tr td { background-color: #EEE; }
.altTable tr+tr td,
.altTable tr+tr+tr+tr td,
.altTable tr+tr+tr+tr+tr+tr td{ background-color: #fff; }
Probably not the best approach, but doable.
If you don't mind a little Javascript, jQuery gives it to you much concisely:
$('.altTable tr:odd').addClass('odd');
Give a class of row2 on tbody and then style your alternate rows with class row1. Other rows will inherit the class row2 from the tbody.
<style>
.row1 { color: red }
.row2 { color: blue }
</style>
<table class="altTable">
<thead><tr><td></td></tr></thead>
<tbody class="row2">
<tr class="row1"><td>row 1</td></tr>
<tr><td>row 2</td></tr>
<tr class="row1"><td>row 1</td></tr>
<tr><td>row 2</td></tr>
</tbody>
</table>
Related
I use bootstrap and datatable.
I created this class.
.nonCompliant{
background: #de5d5d;
}
It put on the tr of some row of the table.
Would like to put another color when nonCompliant class is displayed and hover event
tried
table#samplesTestsTable.dataTable tbody tr:hover > .nonCompliant{
background: #c11f1f;
}
and
tr:hover > .nonCompliant{
background: #c11f1f;
}
without good result.
Edit code of the row
<tr role="row" class="nonCompliant even"><td data-id="19475A" class="sorting_1" tabindex="0">190475A</td><td>2019-04-23</td></tr>
If the .nonCompliant class is modifying the tr itself, then
.nonCompliant:hover {
background: #c11f1f;
}
should work. Otherwise if .nonCompliant is on a direct child element of the tr, like a td,
tr:hover .nonCompliant {
background: #c11f1f;
}
or the child selector you're already using.
If you are applying the class directly to the hr tag, then you can just do this:
.someclass:hover{
background-color: yellow;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td class="someclass">
Hello2
</td>
<td>Lastname</th>
<td>Age</th>
</tr>
</table>
else, if its a direct child you could to this:
tr:hover .nonCompliant {
background-color: yellow;
}
I want to override the style of a TD with a background colour.
My problem is that I have (mechanically) generated table which puts a CLASS on all TR for Zebra Stripes.
So I have
<table>
<tbody>
<tr class="myTROdd">...
<tr class="myTREven">...
<td class="myBackRed">Highlight this cell</td>
My CSS knowledge is weak, but as I understand it
.myBackRed {background-color: #FF0000;}
is less specific, so does not work.
.myTREven TD.myBackRed {background-color: #FF0000;}
is specific and does work, but I want something more generic, for example I tried this (which doesn't work)
.TABLE TD.myBackRed {background-color: #FF0000;}
The problem I have with
.myTREven TD.myBackRed {background-color: #FF0000;}
is that the actual CMS Template is
<tr class="my{TAG}TROdd">...
where {TAG} is substituted with any one of a large number of optional "Adjustment" values, and I am trying to avoid having to code every possible combination in style sheet for my cell-override style
Example of the Fiddle, below with TD override style for rows 3-4, no explicit override CSS for rows 5-6
https://jsfiddle.net/dB93J/1240/
This question comes close, but doesn't solve my problem.
EDIT: As per #Roberrrt comment I've changed
.TABLE TD.myBackRed {background-color: #FF0000;}
to
TABLE TD.myBackRed {background-color: #FF0000;}
and that does indeed seem to override the cell regardless of the variation to the TR class. See new fiddle https://jsfiddle.net/dB93J/1247/
If the understanding about your issue is correct. This is the possible answer for your problem. At first I select the class name of this TR tag with a class="myBackYellowTREeven" and TD tag with a class="myBackYellowTROdd". Below, is my solution...
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
/* NOTE myTROdd is not defined */
.myTREven,.myTREven TD
{
background-color:#f1f1f1
}
.myBackYellowTROdd
,.myBackYellowTROdd TD
{
background-color: #fffccc;
}
.myBackYellowTREven
,.myBackYellowTREven TD
{
background-color: #fff799;
}
/* .myBackRed */ /* This is what I would like to define! ... */
/* , .myBackRed TD */ /* ... or this even ... */
/* , .TABLE TD.myBackRed */ /* ... or EVEN THIS */
.myTREven TD.myBackRed
, .myTROdd TD.myBackRed /* In case myTROdd defined in future */
/* , .myBackYellowTROdd TD.myBackRed */ /* Do I really need this for EVER possible TR style? */
/* , .myBackYellowTREven TD.myBackRed */ /* DITTO */
{
background-color: #FF0000
}
/* MY SOLUTION */
tr.myBackYellowTREven td.myBackRed,
tr.myBackYellowTROdd td.myBackRed {
background-color: #FF0000}
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr class="myTROdd">
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>Normal ODD Row</td>
</tr>
<tr class="myTREven">
<td>Fred Bloggs</td>
<td>PF</td>
<td>5'7"</td>
<td>01-08-1988</td>
<td>Normal EVEN Row</td>
</tr>
<tr class="myTROdd">
<td>DeMarcus Cousins</td>
<td>C</td>
<td class="myBackRed">6'11"</td>
<td>08-13-1990</td>
<td>ODD Row with Red cell</td>
</tr>
<tr class="myTREven">
<td>Isaiah Thomas</td>
<td>PG</td>
<td class="myBackRed">5'9"</td>
<td>02-07-1989</td>
<td>EVEN Row with Red cell</td>
</tr>
<tr class="myBackYellowTROdd">
<td>Ben McLemore</td>
<td>SG</td>
<td class="myBackRed">6'5"</td>
<td>02-11-1993</td>
<td>Yellow ODD Row
- Red cell missing</td>
</tr>
<tr class="myBackYellowTREven">
<td>Marcus Thornton</td>
<td>SG</td>
<td class="myBackRed">6'4"</td>
<td>05-05-1987</td>
<td>Yellow EVEN Row
- Red cell missing</td>
</tr>
</tbody>
</table>
I'm trying to change the border-top color of Bootstrap table.
HTML
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
CSS I've tried
table > tr{
border-top: black;
}
table > tr > td{
border: 1px solid red !important;
}
FIDDLE
https://jsfiddle.net/o9b17p2d/43/
As seen in the fiddle.
I'd like to change the color of the line between Parent & Mama.
You have placed a wrong code.Try this
.table td, .table th{
border-color: black;
}
Try this in your css.
thead{
border-bottom: 2px solid #6c5ce7;
}
https://jsfiddle.net/o9b17p2d/45/
I hope it will help
You have used a wrong selector in table > tr > td { and table > tr {
because thead is direct children for table and no tr.
so, change like this:
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
So that you dont effect all other tables in your page/site.
The easiest way to do this - is to give the element an id, and then target it in CSS using the id.
#no-top-border-td {
border-top: none
}
<td id="no-top-border-td">Mama</td>
or you could add that as a style to the actual element
<td style="border-top: none" />
both of these have a high priority when the CSS is applied.
You can also use border-bottom property for row in thead.Add this code in css
.table thead tr td{
border-bottom:1px solid red;
}
Say I have two classes row and altRow. What is the best practice when setting the backround-color of table rows? I only ask this because I was told that I shouldn't set such properties on the <tr> element. Thanks!!
You were told right, browsers generally don't deal ok with background set on tr elements.
however, you can set the classe to <tr> elements:
<tr class="row">
<td></td>
<td></td>
</tr>
<tr class="altRow">
<td></td>
<td></td>
</tr>
and then in css, use cascading face of CSS :)
.row td { background: yellow; }
.altRow td { background: blue; }
If you're looking for alternating table rows, CSS3 also allows you to do this:
tr:nth-child(odd) { background-color: #ddd; }
tr:nth-child(even) { background-color: #eee; }
With CCS3, you no longer need alternating class names in your HTML
I have some problem with my CSS Style. Currently, i have something like this:
table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}
After this, i found out that i need to have some table somewhere without the hover. So i go ahead and use this to overide:
.image-result tr:hover { background-color: #FFF; }
but unfortunately, this do nothing on the TR.
Can you suggest what should i do?
<div id="image-box">
<div>
<span>Search Image: </span>
<%= Html.TextBox("img-search") %>
<%= Html.Hidden("img-submitto", Url.Action("photopicker", "ajax"))%>
<button id="img-submit">Search</button>
</div>
<div class="image-result">
<table>
<tbody><tr>
<td>c</td>
<td>c</td>
</tr>
</tbody>
</table>
</div>
</div>
Basically the more specific the selector is, the higher the priority the browser will give in applying the rules for that style. Your first rule is more specific so has higher priority, which is why the style isn't being applied. You can do this:
.image-result tr:hover { background-color: #FFF !important; }
to increase the priority. That's not generally the recommended approach as it can (with some justification) be seen as hacking around the real problem. Probably a better solution is to make the new rule at least as specific as the other one:
table.image-result tbody tr:hover { background: #FFF; }
try to use
.image-result tr:hover td { background-color:#fff; }
Try this more specific one.
div.image-result table tbody tr:hover { background-color: #FFF;
color: theDefaultColor;}
Update: I've tried and it works on FF and IE8, not tested on others but should work. However, you'll have to add other styles especially "color" for the class, esle it'll take the original hover one.
Update 2: Modified based on the OP's code.
Here's the code I've used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}
div.image-result table tbody tr:hover { background-color: #FFF; color: #000000;}
</style>
</head>
<body>
<div>
<table id="myTable" border="1">
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</div>
<div class="image-result">
<table id="myTable2" border="1">
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Your second one will be recognised as a less specific selector than the first. Try this to make it more specific:
table.image-result tbody tr:hover { background-color: #FFF; }
(put image-result class wherever it is actually applied).