Pro HTML5 and CSS3 Design Patterns

CHAPTER 15 ■ TABLES

Styled Collapsed Borders

HTML

<h1>Styled Collapsed Borders</h1>

<table id="t1">

<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr>

<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> </table>

CSS

table { border-collapse:collapse; } /* Table and cells borders */

table,td,th { border:5px solid red; }

#t1 { border-left:1px solid black; } /* Left table border */

#t1 .c1 { border-left:1px solid black; }

#t1 { border-right:2px solid black; } /* Right table border */

#t1 .c2 { border-right:2px solid black; }

#t1 .c1 { border-right:1px dotted black; } /* Interior column border */

#t1 .c2 { border-left:1px dotted black; }

#t1 { border-top:1px solid black; } /* Top table border */

#t1 .r1 td { border-top:1px solid black; }

#t1 { border-bottom:2px solid black; } /* Bottom table border */

#t1 .r2 td { border-bottom:2px solid black; }

#t1 .r1 td { border-bottom:1px dotted black; } /* Interior row border */

#t1 .r2 td { border-top:1px dotted black; }

/* Nonessential styles are not shown */