Table and span overlay

Problem

http://jsfiddle.net/PR8y3/

How can i make the button on top right so the background fills the <th> completely in this area, without these margins around it?

Problem courtesy of: user3187469

Solution

I noticed you have a padding:3px on the th of the table. I changed the markup a little by adding a couple of classes and a span for the title.

<tr>
       <th class="title" colspan="2"><span class="main">Title </span><span class="pull-right"><a href="#">button</a></span>
       </th>
   </tr>


.table.table-thin thead th.title {padding:0px}
.table.table-thin thead th.title span {padding:3px;}

Here the updated forked jsfiddle. http://jsfiddle.net/joeSaad/zp5hC/1/

Solution courtesy of: Joe Saad

Discussion

insert to your css display:block;

Discussion courtesy of: FarwallGhost

This recipe can be found in it's original form on Stack Over Flow.