Removing gap between table and panel edge

Question

I've been making a website utilizing Bootstrap 3.2.0 I've encountered an issue with using tables inside of panels and I'm not sure of the solution.

Take this code for example:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Title
                </div>
                <table class="table">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                      </tr>
                      <tr>
                        <td>3</td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                      </tr>
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</div>

I've made a sample fiddle to demonstrate the behavior in question.

If you notice, on the right side of the table, there is a slight gap between the row borders and the panel border. This gap disappears at certain resolution/zoom/size combos but is visible at others. The problem is that the panel's width is usually something like 123.45px while the table is only 123px. Since they are both set to 100% width I have no idea how to get rid of that gap.

score 2 · Answer 1 · answered Oct 14 '14 at 16:31

If you add .pull-left or .pull-right to the .panel-default element, this issue goes away, but creates a new one... the table is no longer responsive! http://jsfiddle.net/otjzhv0x/

Add style="width:100% back into that element, and the problem returns: http://jsfiddle.net/L5w8y7zo/

I think you may be stuck with that portion of a pixel being out of whack once in a while. Not saying there is no way to do it, but it's not going to be easy.

score 2 · Answer 2 · answered Oct 16 '14 at 00:20

Shawn's answer gave me an idea, since you can't force the table to be slightly larger to match the panel, let's enlarge the area the table can expand to.

What I did was take put the table inside a panel-body, then I threw some styling on it:

padding:0px;
margin-right:-1px;

Here is a fiddle to demonstrate.

The idea is that the panel-body takes up the entire space of the panel. Then remove the padding so the table takes up the same space. At this point there is still the occasional gap on the right. So, by increasing the size of the panel-body by 1px, the table will then, at most, expand 1px and the table border will match the panel border and the overlap isn't noticeable. If the table is slightly smaller, that 1px extra will compensate.

This is far from a proper solution and I welcome a better answer. As is, this method won't work if the table border and the panel border are different colors, or if the table has a background color.

Removing gap between table and panel edge

2 Answers2