Table row appearing / disappearing effect needed

**gwh** · Mar 3, 2010 10:20

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.

**RyanReese** · Mar 3, 2010 10:38

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.

**CletusSpuckler** · Mar 3, 2010 12:08

Isn't this pretty much the same thing as a CSS drop-down?

Code:

table.dropdown tbody {
	display: none;
}

table.dropdown:hover tbody {
	display: table-row-group;
}

and

HTML Code:

<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>

**Paul O'B** · Mar 3, 2010 12:58

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:

Code:

<!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>

**CletusSpuckler** · Mar 3, 2010 13:30

Originally Posted by Paul O'B

If you want to support IE7 you will need to use display:block to show the row

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

**RyanReese** · Mar 3, 2010 14:15

Originally Posted by 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

.

**gwh** · Mar 4, 2010 01:31

Thanks for all the suggestions guys - I'll experiment and post back with any questions.

**Paul O'B** · Mar 4, 2010 03:43

Originally Posted by RyanReese

I doubt really anyone knows that

I knew it

(only remembered after testing though

)

**gwh** · Mar 4, 2010 04:08

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.

**Paul O'B** · Mar 4, 2010 04:20

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.

Code:

<!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>

**gwh** · Mar 4, 2010 04:55

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?

**Paul O'B** · Mar 4, 2010 05:32

HI,

Something like this:

Code:

<!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.

**gwh** · Mar 4, 2010 05:40

Hi,

The only background is on the table, but this shouldn't affect the transparency around the rounded corners should it?

Code:

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;
}

**Paul O'B** · Mar 4, 2010 06:04

Yes the background on the table will be behind the th and td. Set the background only on the th and td instead.

**gwh** · Mar 4, 2010 06:58

Ok great - thanks again.

**RyanReese** · Mar 4, 2010 08:17

Originally Posted by Paul O'B

I knew it

(only remembered after testing though

)

I mean anyone else

. It's not something that everyone knows lol.

User Tag List

Thread: Table row appearing / disappearing effect needed

Thread Tools

Display

Table row appearing / disappearing effect needed

Bookmarks

Bookmarks

Posting Permissions