Table format using CSS - border issue

HTML & CSS
1

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;

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

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

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

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:


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