Jaanus Jaanus - 1 month ago 17
CSS Question

Joining multiple HTML table borders

My example code:

<!DOCTYPE html>
<html>
<body>


<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>

</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
<table border="1">
<tr>
<td>
test
</td>
<td>
wuut
</td>
</tr>
<tr>
<td>
test1
</td>
<td>
wuut1
</td>
</tr>
<tr>
<td>
test2
</td>
<td>
wuut2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>


<style>
table {
border-collapse: collapse;
}
</style>


You can just paste it here and see what it looks like : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

What I need is that when tables are inside each other, tables have like joined borders. Only tables that data are separated.

At the moment the right bottom corner of table has like 3 layers of border, but that just looks ugly.

I tried using CSS:

border-collapse: collapse;


But this just removed cellspacing for borders :/

It should look like this, but this is with colspan/rowspan, which is too messy:

<!DOCTYPE html>
<html>
<body>


<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td colspan="3"> </td>
</tr>
<tr>
<td rowspan="3">400</td>
<td rowspan="3">500</td>
<td rowspan="3">test</td>
<td>test</td>
<td>wuut</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td>wuut1</td>
<td>wuut2</td>
</tr>
</table>

</body>
</html>

Answer

Modify the program code that generates the markup so that there are no border=1 attributes and there are class attributes for td elements, controlling borders around each cell. The class attribute would corresponds to CSS settings that set a border on selected sides of a cell, e.g. <td class="left top"> with CSS code:

.left { border-left-style: solid } 
.top { border-top-style: solid }

The width and color of borders you can set in one rule, like:

td { border-width: 1px; border-color: #333; }

You should still set table { border-collapse: collapse } and probably set padding: 0 on each cell that contains a table.

Comments