Collapsing Borders Between Table Cells


Every table data cell defined by the <td> tag has four borders: top, right, bottom, and left. The border-collapse property (Table 9.3) allows you to set a table so that each table data cell will share its borders with an adjacent table data cell, rather than create a separate border for each.

Table 9.3. Border-Collapse Values

VALUE

COMPATIBILITY

collapse

IE5.5[*] , FF1, O5, S1.3, CSS2

separate

IE5.5[*], FF1, O5, S1.3, CSS2

inherit

IE5.5[*], FF1, O5, S1.3, CSS2


[*] For Windows only

In this example (Figure 9.3), the border between data cells has been collapsed into a single, thin red line.

Figure 9.3. The top table shows the code without borders being collapsed, while the bottom table shows the same table with its borders collapsed.


To collapse the borders in a table:

1.

border-collapse:


Type the border-collapse property name, followed by a colon (Code 9.3).

Code 9.3. The border-collapse property lets you remove all space between the table data cells, giving each side a single border.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Collapsing Borders Between Table Cells</title> <style type="text/css" media="screen"> table {      border: 2px solid red;      background-color: #fcc; } td {      padding: 5px;      border: 1px solid red;      background-color: white; } .collapsus { border-collapse: collapse; } </style> </head> <body> <table > <caption>Results from the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th><th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> </body></html>

2.

collapse;


Type either of the following to determine how you want the borders in the table to be treated:

  • collapse, which will cause adjacent table data cells to share a common border; however, you won't be able to set cell-spacing if borders are collapsed.

  • separate, which will cause each table data cell to maintain individual borders.

Tips

  • The final visual results can vary between different browsers, unless you set the border style using CSS.

  • If the borders being collapsed do not share the same border thickness, the thicker border will be shown. If they have the same thickness, then the border for the data cell to the left will be used.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net