Table row borders that don't span full width of table

The desired look is below. I would like to have table row dividers like this that don’t extend the full width of the table. For this reason, applying border-bottom on the TD cells will not work, since the TDs extend full width of the table.

The blue header bar must span full width of the table as shown below.

This is a single table (no embedded tables) with standard structure. Any ideas how to achieve the row dividers so that they have 10px margins left and right? I’ve tried using tr:after (see sample code below, but this technique has issues on some tables that causes layout glitches). I’m looking for a more bulletproof method.

Note: These are pre-existing tables, 100% width of the parent container (1024px) so I’m dealing with the markup as is. I cannot add table cells or rows into the markup other than psuedo content added with :before and :after

Current Solution:

table tr:after{content:'';height:1px;width:995px;position:absolute;background:#ddd;left:10px;}

Could you please post the html for the table also?

Hi Scott,

Did the solution in this post not work as it seems to do exactly what you want and works in modern browsers ok?

Sorry I missed that Paul. Your solution does in fact appear to work as expected. Please close this.

You just did :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.