Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Table CSS

  1. #1
    New to the CF scene
    Join Date
    Mar 2003
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table CSS

    Hi

    I have a table which is one row and eight columns wide.

    Is there any way using css to do this.

    I would like to change the colour of each column on a mouse rollover?

    Cheers

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Surf Boy,

    Although not elegant, this is
    one way to achieve your object....

    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=ISO-8859-1" />
    <meta content="mshtml 6.00.2800.1264" name="generator" />
    <title>td changer</title>
    <style type="text/css">
    <!--
    div{width:400px;position:absolute;left:50%;top:20%;center;margin-left:-200px;}
    table{border:solid 1px #000000;}
    td{width:50px;height:50px;border:solid 1px #000000;}
    //-->
    </style>
    </head>
    <body>
    <div>
    <table summary=""><tr>
    <td onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#ffffff'">&#160;</td>
    <td onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#ffffff'">&#160;</td>
    <td onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#ffffff'">&#160;</td>
    <td onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#ffffff'">&#160;</td>
    <td onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#ffffff'">&#160;</td>
    <td onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#ffffff'">&#160;</td>
    <td onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#ffffff'">&#160;</td>
    <td onmouseover="this.style.backgroundColor='#ff0000'"onmouseout="this.style.backgroundColor='#ffffff'">&#160;</td>
    </tr></table>
    </div>
    </body>
    </html>
    cthead


  •  

    Posting Permissions

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