AEM151
March 3, 2010, 4:20pm
1
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>
PaulOB
March 3, 2010, 6:58pm
4
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
CletusSpuckler:
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 :).
AEM151
March 4, 2010, 7:31am
7
Thanks for all the suggestions guys - I’ll experiment and post back with any questions.
PaulOB
March 4, 2010, 9:43am
8
I knew it (only remembered after testing though ;))
AEM151
March 4, 2010, 10:08am
9
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.
PaulOB
March 4, 2010, 10:20am
10
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>
AEM151
March 4, 2010, 10:55am
11
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?
PaulOB
March 4, 2010, 11:32am
12
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.
AEM151
March 4, 2010, 11:40am
13
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;
}
PaulOB
March 4, 2010, 12:04pm
14
Yes the background on the table will be behind the th and td. Set the background only on the th and td instead.
I mean anyone else :). It’s not something that everyone knows lol.