Managing conflicting cell borders
When a table’s cell spacing is set to 0, two borders of adjacent cells can conflict, because they both take up the same space. When this happens, browsers use a complicated set of rules to decide which of the overlapping borders will dominate. Unfortunately, since these rules are not well documented, it is difficult to predict how border conflicts will be resolved.
In both of the examples below, all borders except for those of the bottom right cell are specified as solid, gray, 3-pixel borders. The bottom right cells in both examples have double black borders on all sides, but the one in the second example has 4-pixel borders instead of 3-pixel. Because of this difference, the borders of the bottom right cell in the second example “win”, while those in the first example “lose”.
|
|
|
|
Double borders “lose” |
Double borders “win” |
To avoid an undesired outcome when adjacent borders conflict, you sometimes need to forcibly hide one of the conflicting borders. Alternatively, if you want all cell borders to be visible even when cell spacing is 0, you can use the border-collapse CSS property on the table to prevent border overlapping.
To hide one or more borders of a cell
- Select the cell. (Click it while holding down the Ctrl key.)
- Do one of the following:
-
- Right-click, point to Table, and click Advanced.
- On the Layout menu, go to Borders, and then click Cell Borders.
- In the border selection box, select the cell border you want to change. To select multiple borders at once, click each while holding down the Ctrl key. (See the examples below.)
Click a border to select it.
Click while holding down Ctrl to select multiple borders.
- Click the Style box and select None.
- Click OK.
To prevent overlapping cell borders when cell spacing is set to 0
- Place the insertion point just before the table. (The <table> tag should be highlighted on the Tag Selector.)
- Click the HTML tab to switch to HTML mode.
- Examine the <table> tag on the highlighted line and do one of the following:
- If the tag contains the inline style declaration style=”border-collapse:collapse;”, change it to style=”border-collapse:separate;”.
- Otherwise, insert style=”border-collapse:separate;” into the <table> tag.
- Return to Edit mode to see the effect of the change.