Geek Answers Handbook

Nested tables: 1px border with css

I am trying to create a table with a 1px black border.

I need to nest the table in the main table and get "thick" borders where the next table applies to its closing <td> . I just need a 1px border.

I have this, essentially:

 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;}
+2
source share
4 answers

If you understand correctly, you can use the boundary, left, right, boundary, and lower boundaries to create these β€œspecial” cases that you want.

For example, in your nested tables you can set

 border-left:0;

to get the "final" border of 1 px on the left side of the nested table.

+2
source

do not specify a 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> &nbsp; </td> <td> &nbsp; </td> </tr> <tr> <td> &nbsp; </td> <td> &nbsp; </td> </tr> </table> </td> <td> content </td> </tr> <tr> <td> content </td> <td> <table class="nested"> <tr> <td> &nbsp; </td> <td> &nbsp; </td> </tr> <tr> <td> &nbsp; </td> <td> &nbsp; </td> </tr> </table> </td> </tr> </table> </body> </html>
+2
source

Just put the border attribute on td s. If you need a 1px border, this will be done; you do not need this on the tables.

+1
source

This page describes how to do this pretty well: http://www.visakopu.net/misc/table-border-css/

What happens is that the borders on the cells stumble upon each other, making it seem like there are wider borders than there really are. Instead of using the border-collapse property, you set the border on the table itself and only on, say, the top and left sides, and you set the borders at the bottom and right of the cells.

+1
source

More articles:


All Articles