SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table row appearing / disappearing effect needed

    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.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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>

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the suggestions guys - I'll experiment and post back with any questions.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I doubt really anyone knows that
    I knew it (only remembered after testing though )

  9. #9
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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>

  11. #11
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  13. #13
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes the background on the table will be behind the th and td. Set the background only on the th and td instead.

  15. #15
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok great - thanks again.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I knew it (only remembered after testing though )
    I mean anyone else . It's not something that everyone knows lol.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •