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;}
