Hi,
I'm trying to create a table with a 1px black border.
I have to nest a table in the main table, and get "thick" borders where the nexted table butts against its enclosing . I just want a 1px border everywhere.
I have this, in effect:
table.outer{border:1px black solid; border-collapse: collapse;}
td{border:1px black solid; border-collapse: collapse;}
table.nexted{border:1px black solid; border-collapse: collapse;}
Just put the border attribute on the tds. If you want a 1px border throughout, that'll do it; you don't need it on the tables.
If I understand you correctly, you can use border-left, border-right, border-top and border-bottom to create these "special" cases you want.
For instance, in your nested tables you can set
border-left:0;
to get a "resulting" 1 px border in the left side of the nested table.
this page describes how to do it pretty well: http://www.visakopu.net/misc/table-border-css/
What's happening is that the borders on the cells are bumping up against each other, causing it to appear that there are thicker borders than there actually are. Instead of using the border-collapse property, you set a border on the table itself, and only on, say, the top and left sides, and you set borders on the lower and right sides for the cells.
give no border style for your nested table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table.outer
{
border: 1px black solid;
border-collapse: collapse;
width: 100%;
}
table.outer td
{
border: 1px black solid;
border-collapse: collapse;
}
table.nested, table.nested td
{
border-width: 0px;
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<table class="outer">
<tr>
<td>
<table class="nested">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
<td>
content
</td>
</tr>
<tr>
<td>
content
</td>
<td>
<table class="nested">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>