Search code examples
htmlcssbordercss-tables

CSS: Merging Div and Table Borders

Desired Result

I want to achieve was is shown on the picture above. I have a div with a table inside of it, and I want their borders to merge. So far I've had partial success with the CSS on this jsfiddle: http://jsfiddle.net/uQFLX/

As you can see, the right side is wrong. I can fix this by setting the width of the table manually, but I need its size to be dynamic. Is there a way to achieve this while keeping the width: 100% property on the table?

Solution

  • No need to merge the borders, get rid of the left/right borders on the table instead.

    You could change your style to this:

    table
{
   margin: 0;
   width: 100%;
   border-top: 1px solid #D9D9D9;
   border-bottom: 1px solid #D9D9D9;
}

    Updated your fiddle to show it in action: http://jsfiddle.net/uQFLX/1/