How To Remove Extraneous Table Borders

Table header and row cells without content but still with borders can be distracting. Remove extraneous borders from sight for a table that's more visually attractive.

Here's an example table with borders around an empty header and empty cells.

When the table's extraneous borders are removed, it looks like this.

If it matters to you, the table is indeed responsive to device and browser width. The minimum width depends on the content of the table, of course, like tables do.

The way the extraneous borders are removed is two steps:

1. In the empty header or row cell, put a div with CSS declaration background-color:white (or whatever color your page background is) and CSS declaration position:relative.

2. Use one or two of these CSS properties (left, top, right, or bottom) to position the div so its edge overlaps the extraneous border(s) and covers them up.

There are particulars with things to consider, of course. But the above set of two steps is the essence of how it's done.

The particulars may be seen as complex. I didn't realize how complex it might appear until I started writing this tutorial.

As you go through the tutorial, keep this in mind: What the code does is size and shift the div.

To remove a border, the code positions a div with a solid background color over the top of the border.

Tip: Use background-color:blue; (or other color that's different than the table's) to see the location of the div that will be positioned over the top of the border. Once it's the size and position you want, then change the CSS to background-color:white; or other color to match the background of the table.

The Particulars for Removing Extraneous Table Borders

The following code examples assume two things: The table background color is white and the border around the table is 1 pixel thick. If your background color is different or your border is thicker, adjust the code as necessary.

Let's first talk about removing a horizontal border from a blank table row cell. Then removing two borders, vertical and horizontal, from a blank table header cell.

Removing a horizontal border from an empty table row cell —

Here's part of the solution, the basic code, with notes. I'll then mention other things to consider, followed by code for an entire solution example.

<div style="position:relative; background-color:white; height:5px;"></div>

Notes about the basic code.

The three CSS declarations in the above basic code allow the position of the div to be shifted, make the div background non-transparent, and specify a div height.

• The position:relative; declaration allows you to shift the div into a position relative to where it's normal position is at.

• The background-color:white; declaration is needed so the div isn't transparent. It will cover the border that's being removed.

• The height:5px; declaration can be changed to any height required. For covering a 1px border, only 1px is actually required. But if it's a bit wider, you have a little leeway in positioning the div.

Other things to consider.

The div needs to be shifted and might need to be made wider to accomodate cell padding.

• If the border to remove is the bottom border, put a bottom:-2px declaration into the div. It moves the div down 2 pixels. The amount of move can be changed as needed. (To remove a top border, a top:-2px declaration.)

• If the table has cell padding, the div will need to be extended by that amount so you don't get stubs of border at the edge of the row cell. Specify a margin declaration to accomodate the cellpadding. The example table has cellpadding="7", so the margin declaration is margin:-7px; to extend the div by 7 pixels past the normal margin.

The table row cell's CSS.

Vertical alignment depends on which horizontal rule will be removed. Optionally, the TD width can be specified.

• The TD tag needs to be either style="vertical-align:bottom;" or style="vertical-align:top;", respectively, depending on whether you're removing the bottom or the top border. The example table removes the bottom border.

• Not strictly necessary, and might not apply to your implementation, but putting a width:100%; declaration into the TD tag tends to keep the other columns from widening to accomodate a larger table width.

You'll see all those particulars and considerations in this code.

<td style="vertical-align:bottom; width:100%;">
<div style="position:relative; bottom:-2px; background-color:white; height:5px; margin:-7px;"></div>
</td>

The above is what removes the bottom horizontal border from the example table's empty row cells.

Removing vertical and horizontal borders from an empty table header cell —

This is more complex because there are two borders to remove instead of just one.

The height of the div must match the height of the vertical border at the header cell. Because the height of text can be slightly different for different browsers, causing the vertical border to extend or contract a pixel or so, specifying an exact height for the div isn't feasible.

Instead of specifying an exact height, the div with background-color:white; and position:relative; declarations (the wrapper div) contains these three parts:

1. A spacer div.

2. An area the same height as the text in the tallest header cell.

3. Another spacer div.

Those three parts will make the height of the wrapper div the same height as the vertical border of the empty header cell.

Here are more details of those three parts within the wrapper div.

1. An empty spacer div with a height specified as the total of the cellpadding and border width. With 7 pixels of cellpadding and 1 pixel borders, the total would be 8 pixels (7+1=8).

2. The text of the header cell with the most lines. This makes the height of this part of the empty header cell the same as the height of the text in the tallest header cell. The color of the text is the same as the background color to make it invisible.

3. Another empty spacer div, a duplicate of the div already placed above the invisible text.

That makes the height of the background-color:white;/position:relative; div (the wrapper div) the same height as the header cell's vertical border.

The div with background-color:white; and position:relative; declarations.

This is the wrapper div, the one containing the spacer div, the invisible text, and a second spacer div — as listed above.

The wrapper div is shifted both up and to the right so both the top and the right borders are removed. It's done with top:-1px; right:-1px;

The table cell's CSS.

As with the table cell, width:100%; is optional. No other CSS is required in the TH tag.

Here's the code to remove the top and right borders from an empty table cell.

<th style="width:100%;"><div style="position:relative; top:-1px; right:-1px; background-color:white; margin:-8px; color:white;">
<div style="height:8px;"></div>
Ipsum<br>Dolor
<div style="height:8px;"></div>
</div></th>

When the page is loaded, the top horizontal and right vertical borders of the empty header cell should be invisible.

Example Table

It case it will help, here's the source code of the entire example table.

<table border="1" cellpadding="7" cellspacing="0" style="border-collapse:collapse;">
<tr>
<th>Lorem</th>
<th>Ipsum<br>Dolor</th>
<th>Amet</th>
<th style="width:100%;"><div style="position:relative; top:-1px; right:-1px; background-color:white; margin:-8px; color:white;">
<div style="height:8px;"></div>
Ipsum<br>Dolor
<div style="height:8px;"></div>
</div></th>
</tr>
<tr>
<td>Donec</td>
<td>Vel</td>
<td>Risus</td>
<td style="vertical-align:bottom; width:100%;"><div style="position:relative; bottom:-2px; background-color:white; height:15px; margin:-7px;"></div></td>
</tr>
<tr>
<td colspan="4">Cras blandit arcu facilisis porta tristique. In commodo metus.</td>
</tr>
<tr>
<td>Quisque</td>
<td>Nam</td>
<td>Etiam</td>
<td style="vertical-align:bottom; width:100%;"><div style="position:relative; bottom:-2px; background-color:white; height:15px; margin:-7px;"></div></td>
</tr>
<tr>
<td colspan="4">Vestibulum finibus fringilla non ullamcorper ante venenatis.</td>
</tr>
<tr>
<td>Proin</td>
<td>Cras</td>
<td>Praint</td>
<td style="vertical-align:bottom; width:100%;"><div style="position:relative; bottom:-2px; background-color:white; height:15px; margin:-7px;"></div></td>
</tr>
<tr>
<td colspan="4">Aliquam ac mi malesuada nibh porttitor efficitur. Fusce vehicula.</td>
</tr>
</table>

Your implementation may require different borders to be removed. The examples can be used as a guide.

(This article first appeared in Possibilities ezine.)

Will Bontrager