Forum Moderators: not2easy
I am trying to create a table with a border of 2, and when I mouseover each table cell (I know the javascript, its only the CSS I am stuck with) I want to create an inner border color. Each cell has a color defining its value in the matrix, therefore I wish to leave this color shown and also show the inner border to show which cell is either selected or the mouse is currently hoovering over.
<table border="2">
<tr>
<td style="background-color:yellow">cell 1</td>
<td style="background-color:red">cell 2</td>
<td style="background-color:blue">cell 3</td>
</tr>
<tr>
<td style="background-color:blue">cell 4</td>
<td style="background-color:yellow">cell 5</td>
<td style="background-color:red">cell 6</td>
</tr>
<tr>
<td style="background-color:red">cell 7</td>
<td style="background-color:blue">cell 8</td>
<td style="background-color:yellow">cell 9</td>
</tr>
</table>
I have tried setting the padding in the hope that the background color is shown as an inner border but this does not work. When setting the cell border using css I loose the table default border of 2. Would anyone know of how to achieve this effect using CSS? It only has to work on IE.
I appreciate any help.
TIA,
-Gs
try this example, it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
#table1 {
border-top:2px solid #999;
border-right:2px solid #333;
border-bottom:2px solid #333;
border-left:2px solid #999;
margin:20px auto;
}
.y {
border:1px solid #999;
background-color:#ffe;
color:#000;
padding:10px;
text-align:center;
}
.r {
border:1px solid #999;
background-color:#fee;
color:#000;
padding:10px;
text-align:center;
}
.b {
border:1px solid #999;
background-color:#eef;
color:#000;
padding:10px;
text-align:center;
}
#over{
border:2px solid #000;
padding:8px;
}
</style><script type="text/javascript">
window.onload=function(){
cell=document.getElementById('table1').getElementsByTagName('td');
for(c=0;c<cell.length;c++) {
cell[c].onmouseover=function(){
this.id='over';
}
cell[c].onmouseout=function(){
this.id='';
}
}
}
</script></head>
<body><table id="table1">
<tr>
<td class="y">cell 1</td>
<td class="r">cell 2</td>
<td class="b">cell 3</td>
</tr><tr>
<td class="b">cell 4</td>
<td class="y">cell 5</td>
<td class="r">cell 6</td>
</tr><tr>
<td class="r">cell 7</td>
<td class="b">cell 8</td>
<td class="y">cell 9</td>
</tr>
</table></body>
</html>
birdbrain
Exactly what the doctored ordered, thanks so much...
Rgs,
-Gs
No problem, you're very welcome. ;)
