Prevent Duplicate Borders on Nested Table (border-collapse not working)
border, css, html-table, nested
Solution
border-collapse works on the td and tr elements within a table.
And like somacore stated... why not turn off the border on the second table? (or why not use real markup?)
Problem
I have been searching the net about border-collapse. And it seems it does not really collapse the border on nested table. I wrote a sample HTML and it seems to be ignoring border collapse. I found a related question here but it seems it is not solved. link text ``` <html> <head> </head> <body> <p>dsafhidsljfalkdsjfklsdajfkjsdakl jdsfjasdklfasdkljfkl</p> <table style="border: solid 1px #000000; border-collapse: collapse;" cellpadding="0" cellspacing="0"> <tr> <td> <table style="border: solid 1px #000000; border-collapse: collapse;" cellpadding="0" cellspacing="0"> <tr> <td> A </td> <td> <input type="text" /> </td> </tr> <tr> <td> B </td> <td> <input type="text" /> </td> </tr> </table> </td> </tr> </table> </body> </html> ``` Supplementary Info (based on somacore and moo's comment): I already used the "border: none" in the internal table to solve this problem. But on some designs, it is not just one nested table. For complex web pages, it needs upto 3 to 4 nested table levels to design the GUI. And inside those nested tables, not all cells uses border. I had just used a simple example for the problem. Is there any other solution that hand picking merging adjacent borders to one?