Forum Moderators: not2easy
I used CSS to give the headline of a table a different look than the rest of the table. Unfortunately the corners of the collapsing borders of headline cells and regular table cells take the color of the regular cells.
It's hard to explain. You see what I mean, if you take a look at the table generated by this code:
<html>
<head>
<title></title>
<style type="text/css">
<!--
#tab1{
border-collapse:collapse;
}
#tab1 td{
border-top:solid 5px lightgrey;
border-bottom:solid 5px lightgrey;
border-left:solid 5px lightgrey;
border-right:solid 5px lightgrey;
}
#tab1 tr.headline td{
border-top:solid 5px black;
border-bottom:solid 5px black;
border-left:solid 5px black;
border-right:solid 5px black;
}
-->
</style>
</head>
<body>
<table id="tab1" border="1" cellspacing="0" cellpadding="0" width="600">
<tr class="headline">
<td>Headline 1</td>
<td>Headline 2</td>
<td>Headline 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
<!--
#tab1{
border-collapse:collapse;
}
#tab1 td{border:solid 5px lightgrey;
border-top:0px;}
#tab1 th{
border:solid 5px black;text-align-left;
}
-->
</style>
</head>
<body>
<table id="tab1" width="600">
<tr>
<th>Headline 1</th>
<th>Headline 2</th>
<th>Headline 3</th>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
</body>
</html>
The main problem still remains: The lower corners of the headline cells are still in the wrong color.
