SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table format using CSS - border issue

    Table format using CSS - boarder issue

    Issues: CSS formatting HTML table more specifically table boarder issue.

    problem: - If the mouse is moved out from the bottom of the table the boarders appear. - moving into the table from the bottom, does return things back not normal but I like it to remain constant.

    works: - at refresh/reload table/css. format -> works - moving the mouse from the TOP and into the table, the format -> works. - moving round within the table the format -> works.

    side note: when hovering over a TR record I have it set to display border-left-style:solid; to indicate current hover. ultimatly I like to change the entire record color with another color but for now I'll like to keep the border-left-style:solid;

    PHP Code:
    echo '<table id="tableExample"> 
        <tr> 
           <th> Incident </th> 
           <th> Title </th> 
           <th> Level </th> 
        </tr> '
    ;
        foreach(
    $testRes as $value1)
        { if(
    $value1['inc_level'] == 2) { $level "background-color: #3090C7;"; }
          elseif(
    $value1['inc_level'] == 3) {$level "background-color: #FFA0A0;"; }
          else {    
    $level "background-color: #DEDEDE; "; }

        echo 
    "<tr style='"$level "'> <td>"$value1['inc_index'] . "</td> <td>" $value1['inc_title'] . "</td>  <td>"$value1['inc_level'] . "</td> </tr>"; } 
    Code:
    * Table CSS */
    #tableExample { border-collapse:collapse; border-style:none;  } 
    #tableExample th {background-color: #fff; border-left-style:solid; border-color: #fff;} 
        #tableExample tr {   }  
        #tableExample tr:hover { cursor: default; background-color: #ccc; border-left-style:solid; } 
        a.tablelink:link       { color: black; text-decoration:none; } 
        a.tablelink:hover      { color: black; text-decoration:none; }
        a.tablelink:active     { color: black; text-decoration:none; } 
        a.tablelink:visited    { color: black; text-decoration:none; }
    grid1.jpg grid2.jpg

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, robin01.

    The php code is of no value to us. If you can post the HTML code along with the CSS, we might be better able to help. A link to your site would probably be easier and better.

    If you haven't already, please click the blue link at the bottom of my post and read the posting guidelines.

    Cheers

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by robin01 View Post
    T

    side note: when hovering over a TR record I have it set to display border-left-style:solid; to indicate current hover. ultimatly I like to change the entire record color with another color but for now I'll like to keep the border-left-style:solid;
    Hi,

    I couldn't really work out what you were saying but as Ron suggests if you can post a working example in html and css we should be able to help.

    If you are changing the borders on the table cells (or tr) on hover then that is unlikely to give consistent results due to the border conflict algorithms that dictate which borders show in the collapsed border model. If you use the separate border model then the borders on table cells (not the tr) will change on hover ok but of course you have gaps.

    I would do this for consistent hovering of table borders:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    table {
    	border-collapse:separate;
    	border-spacing:0;
    	width:50%;
    }
    td { border:1px solid #000 }
    tr td {
    	background:blue;
    	border-color:blue;
    }
    tr + tr td {
    	background:green;
    	border-color:green
    }
    tr + tr + tr td {
    	background:yellow;
    	border-color:yellow
    }
    table tr:hover td {
    	cursor: default;
    	background-color: #ccc;
    	border:1px solid red;
    }
    </style>
    </head>
    
    <body>
    <table>
    		<tr>
    				<td>test</td>
    		</tr>
    		<tr>
    				<td>test</td>
    		</tr>
    		<tr>
    				<td>test</td>
    		</tr>
    </table>
    </body>
    </html>


Tags for this Thread

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
  •