Hi everyone
I have a small 4-row table on my web page. I want the header row only to be showing and then when the mouse rolls over the row, the remaining body rows will appear showing the contents of the table on rollover. On rollout, the rows would disappear, once again showing only the header row. I wondered if this could be done with css and if so how?
Appreciate any advice.
You would need Javascript to get this sort of effect :)…You could possibly imitate something like this if you didn’t use tables (use a dropdown concept), but I’m assuming you need tables since it is tabular data.
Isn’t this pretty much the same thing as a CSS drop-down?
table.dropdown tbody {
display: none;
}
table.dropdown:hover tbody {
display: table-row-group;
}
and
<table class="drowdown">
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>
Hi,
Isn’t this pretty much the same thing as a CSS drop-down?
Yes that’s about it 
If you want to support IE7 you will need to use display:block to show the row and our old friend IE6 will need a hover script - which we can steal from the suckerfish routines and end up with something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.dropdown tbody {
display: none;
}
td,th{border:1px solid #000}
table.dropdown:hover tbody {
display: table-row-group;
}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("tablewrap").getElementsByTagName("TABLE");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
table.dropdown:hover tbody,
table.over tbody {display:block}
</style>
</script>
<![endif]-->
</head>
<body>
<div id="tablewrap">
<table class="dropdown">
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Whaddaya know. Didn’t try it out in IE7 as I don’t have it installed on my home computer, and I didn’t actually know about that IE7 “feature”. But, for some reason, I’m not really surprised
I doubt really anyone knows that because it’s not everyday we have someone asking to do what you are doing (well…with a table I mean).
In all my time on these forums (everyday) I’ve never seen it asked lol :).
Thanks for all the suggestions guys - I’ll experiment and post back with any questions.
I knew it (only remembered after testing though ;))
This works really well. Would be good if there wasn’t such a sharp transition when you rollover though - I mean would be better if the rows kind of dropped down or animated down. I guess I’d need something like jquery for that right?
Just one other thing - can you apply border-radius to the header row of a table? I just tried it and it didn’t work. I’d like the top left and right corners to be rounded if possible.
Hi,
Yes if you want animation effects then you could use jquery quite easily or perhaps the superfish extension could be modified (although it might be a bit specific to lists).
border-radius will work on table headers but only on the separated borders model.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.dropdown tbody {
display: none;
}
td, th {
border:1px solid #000
}
table.dropdown:hover tbody {
display: table-row-group;
}
table{border-collapse:separate}
th{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding:10px;
}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("tablewrap").getElementsByTagName("TABLE");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
table.dropdown:hover tbody,
table.over tbody {display:block}
</style>
</script>
<![endif]-->
</head>
<body>
<div id="tablewrap">
<table class="dropdown">
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Thanks - I’ve used the following to specify the top left and right for the corners, but how do you do the same thing for border-radius:
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
I also noticed that using the above didn’t make the corners transparent. Is this not possible?
HI,
Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.dropdown tbody {
display: none;
}
td, th {
border:1px solid #000;
background:red;
}
table.dropdown:hover tbody {
display: table-row-group;
}
table {
border-collapse:separate
}
th {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
padding:10px;
}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("tablewrap").getElementsByTagName("TABLE");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
table.dropdown:hover tbody,
table.over tbody {display:block}
</style>
</script>
<![endif]-->
</head>
<body>
<div id="tablewrap">
<table class="dropdown">
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The borders seem to be transparent unless you have set a background to something underneath of course.
Hi,
The only background is on the table, but this shouldn’t affect the transparency around the rounded corners should it?
div#tablewrap {
position: absolute;
left: 0px;
top: 9px;
z-index: 10;
}
div#tablewrap table {
width: 230px;
font-size: 11px;
color: #fff;
background-color: rgba(22,50,92,0.9);
}
td, th {border:1px solid #fff}
div#tablewrap table td {
width: 50%;
text-align: center;
padding: 7px 0;
}
/*div#tablewrap table td#left {
width: 48px;
text-align: center;
padding: 5px;
}
*/
div#tablewrap table th {
text-align: center;
padding: 7px 0;
font-weight: bold;
}
div#tablewrap table.dropdown tbody {
display: none;
}
div#tablewrap table.dropdown:hover tbody {
display: table-row-group;
}
div#tablewrap table{border-collapse:separate}
div#tablewrap th{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
padding:10px;
}
Yes the background on the table will be behind the th and td. Set the background only on the th and td instead.
Ok great - thanks again.
I mean anyone else :). It’s not something that everyone knows lol.