Is it possible to highlight table row on hover (something like this) using CSS only (without JavaScript)?
Yes, a row is possible but not a column.
tr:hover {
background-color: lightyellow;
}
Yes it's possible but you have to worry about browser compatibility here is an example
<style type="text/css">
.tbl {width: 640px;}
.tbl tr {background-color: Blue; height: 24px}
.tbl tr:hover {background-color: Red;}
</style>
<table class="tbl">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
works with most browsers
table tr:hover td {
background: #efefef;
cursor: pointer;
}
If you don't care about Internet Explorer, the :hover CSS pseudo-class works with any element.
If you do care about IE, you can find a workaround here.
<style type="text/css">
tr.tr-hover-class:hover {
background: grey !important;
}
</style>
<table>
<tr class='tr-hover-class'></tr>
</table>
In this case you would add it to a table row using a stylesheet rule as in this CSS code example below:
tr:hover {
background-color: #ffff99;
}
Full Example:
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
background: #b8d1f3;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: #ffff99;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>
Related
This is my view table:
<tr>
<th><p>ID</p></th>
<th><p>NAME</p></th>
<th><p>CLASS</p></th>
<th><p>EDIT</p></th>
<th><p>DELETE</p></th>
</tr>
This is my css file:
table.mytable tr{
background-color: #ffff99;
}
For highlights rows using hover, it is not working for me. i don't know where i did wrongly kindly help on this issue?
Many thanks,
viswa
User :hover selector to hover color:
table.mytable tr:hover{
background-color: #ffff99;
}
<table class="mytable">
<tr>
<th><p>ID</p></th>
<th><p>NAME</p></th>
<th><p>CLASS</p></th>
<th><p>EDIT</p></th>
<th><p>DELETE</p></th>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>2</td>
<td>edit</td>
<td>delete</td>
</tr>
</table>
tr:hover {
background-color: #ffff99;
}
Check here
try this one:
ADD P:hover selector to hover color:
p:hover{
background-color: #ffff99;
}
Thanks
DEMO HERE
OR
.mytable{
width:100%;
border-collapse:collapse;
border:#4e95f4 1px solid;
}
.mytable td{
padding:7px;
border:#4e95f4 1px solid;
}
.mytable tr{
background: #b8d1f3;
}
.mytable tr:hover {
background-color: #ffff99;
}
DEMO UPDATED HERE
viswa.
To highlight on hover, you need to add the css for hover too. Since, you are enclosing your rows in <p> tags, you can use the following in you css file.
p:hover{
background-color: #ffff99;
}
Make sure there is no space between : and the word 'hover'.
I have a problem, I need to change a table background-color, I can only change the css. I want a hover on a table tr but some of the table td have an inline bg-color and I can't get a hover over it. !important doesn't work. Here is my problem.
CSS
table{
border: 1px solid black;
}
table tr:hover{
background-color: pink !important;
}
HTML
<table>
<tr>
<td style="background-color:green;">test1</td>
<td>test2</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
</table>
Adding rules for td fixed your problem
table tr:hover td
table{
border: 1px solid black;
}
table tr:hover,
table tr:hover td {
background-color: pink !important;
}
<table>
<tr>
<td style="background-color:green;">test1</td>
<td>test2</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
</table>
Your style is Incorrect, In the CSS you try to change the tr background, not the td.
Replace the css by this and it works fine if you want change all the hover line in pink :
table tr:hover td{
background-color: pink !important;
}
Replace the css by this and it works fine if you want change the hover td in pink :
table td:hover{
background-color: pink !important;
}
Here's the fiddle:
https://jsfiddle.net/80mek2sL/1/
I want to select all but the first tr and apply:
border-top: 1px grey solid;
Then I want to select all first td's but not the first td of the first tr (= ignore first tr) and apply
border-right: 1px grey dotted;
(I totally dont care about compatibility with prehistorical Web browsers, I just want it to work on nowadays Web browsers)
What I dont get (that's why I'm lost actually) is that immediate selector table > tr doesn't select tr (otherwise I would have solved my problem)
Your selector is working. The problem is that tr's don't have a border. You need to apply it the td within...
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
Updated Fiddle
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px; padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
<h1>Vim</h1>
<table id="cheatsheet">
<thead><tr>
<td colspan="2"><h3>aa</h3></td>
</tr></thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code></td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code></td>
<td style="width:auto">split vertical</td>
</tr>
</table>
On another note, the reason table > tr doesn't work is because tr's are not an immediate descendant of table in the rendered HTML. If you use your browsers element inspector you will see that thead and tbody elements are automatically inserted for you
EDIT
After the comment below all you need to do is this...
#cheatsheet tbody td {
border-top:1px grey solid;
background-color: #EF0;
}
ie. target the td within tbody only,
Updated Fiddle
check fiddle :https://jsfiddle.net/80mek2sL/6/
nth-child(n+2) selector helps to select any number of child. in following example I am selecting row from ahead of second child.
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
You can also play aorund (n + *) and check the result to better understand the nth-child selector
note: you can not put border property to <tr> so you will need to
assign it to <td>
HTML
<table id="cheatsheet">
<thead>
<tr>
<td colspan="2">
<h3>aa</h3>
</td>
</tr>
</thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code>
</td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
</table>
CSS
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px;
padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
I want the header of the first column in my table to be hidden, to get this look:
So I am using the CSS visibility: hidden; to do so. The screenshot above is taken in Chrome, where it works perfectly. However, this happens in Firefox:
How can I make Firefox hide the header of the first column in a table?
EDIT: Here's my table CSS, as requested:
.styledtable{
width:100%;
table-layout:fixed; /*each column same width, unless width explicitly specified*/
border:1px solid black;
border-collapse:collapse;
}
.styledtable td, .styledtable th{
border:1px solid black;
padding:3px;
}
.styledtable th{ background:#cfcfcf; }
.styledtable td{ background:white; }
/* in a table with the first columnn empty (ie. with actions in the column below it),
* make the first column take up space, but not actually appear.
* Usage: <th style="width:40%;" class="firstcol"> </th>
*/
.firstcol{
visibility:hidden;
}
/*every second row different color, if the table itself doesn't have the class "no-odd-row-highlight"*/
.styledtable:not(.no-odd-row-highlight) tr:nth-child(odd) td{ background:#eeeeee; }
This works for me in all major browsers:
<style type="text/css">
table {
border: none;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
margin: 0;
background: #fff;
border: 1px solid #000;
padding: 0;
}
table th.hidden {
border: none;
visibility: hidden;
}
</style>
<table>
<tr>
<th class="hidden"></th>
<th>ID</th>
<th>Something</th>
</tr>
<tr>
<td>Options</td>
<td>1</td>
<td>---</td>
</tr>
</table>
Depends upon what you want to achieve in styling, but generally, setting relevant element's (color/background-color/border-(top n left)-color(in this case)) to 'transparent' usually works across browsers.
hope this helps someone.
I have a simple table with several rows. The top rows contains headings, while the rows under it have the id attribute of data. I have been trying to set CSS for the table rows that only have the id attribute data, but have so far only been able to set it for the entire table.
<table width = "80%" align="center" id="example">
<tr>
<td><h3>ID</h3></td>
<td><h3>First Name</h3></td>
<td><h3>Last Name</h3></td>
</tr>
<tr id="data">
<td>1</td>
<td>Joe</td>
<td>Schmoe## Heading ##</h3><td>
</tr>
</table>
and the CSS. I tried changing #example tr to tr #data with no luck. I know that I am overlooking something simple, but I am unsure what.
table#example {
border-collapse: collapse;
}
tr #data{
background-color: #eee;
border-top: 1px solid #fff;
}
tr #data:hover {
background-color: #ccc;
}
tr #data {
background-color: #fff;
}
tr #data th, tr #data td {
padding: 3px 5px;
}
tr #data td:hover {
cursor: pointer;
}
I'm not using classes because I'm not familiar enough with CSS and being able to use id only once is not a limitation for what I need.
You could use a class, but better yet, don't use classes at all (HTML markup is your friend)! Here's a clean solution to your problem:
HTML
<table>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Joe</td>
<td>Schmoe</td>
</tr>
</table>
CSS
th {
font-weight: bold;
/* More styles here */
}
td {
background: #EEE;
border-top: 1px solid #FFF;
}
tr:hover td {
cursor: pointer;
background: #CCC;
}
/* Styles upon styles */
Simply use the th element to specify the table header. To get each table data row to highlight as you mouse over it, simply use the tr:hover td rule to catch that case. See this fiddle for a working example.