Bootstrap 3 - 1px right gap between HTML table and wrapping div

3
votes

trying to fix html, cant figure out there this 1px right gap between table and wrapping div is coming from...

  • Forgot to mention, I am using Bootstrap.

I believe, it could be some sort of unavoidable defect coming from oppressiveness of Bootstrap engine.

Here is the screenshots (with zoomed area) and corresponding css, please note the gap is between <table class="table"> and <div class="panel-body">, not between tr-td-thead-tbody and table.

(added red border for better visibility of that white 1px gap)

enter image description hereenter image description here

Here I am adding computed styles for both - wrapping div "panel-body" and the table, since its a Bootstrap engine, responsive, the size is calculated on the fly.

enter image description here

3
htmlcsstwitter-bootstraptwitter-bootstrap-3
are you using a css reset? – floor
if you inspect the panel table and look at the box model is there no padding or magin? – floor
what is the style for table::after? – Stickers
Its a Bootstrap engine, here I added 2 more screenshots for computed sizes – monstro

3 Answers

2
votes

This seems to a rendering issue with Chrome. For comparison, here is the Bootstrap 3 panel with table example page in Chrome:

1px gap in Google Chrom

and the same example in the latest FireFox, missing the gap:

enter image description here

For what it's worth it appears to be a known issue both to the Bootstrap team: https://github.com/twbs/bootstrap/issues/11000

And has been filed on the Chrome bug tracker: https://code.google.com/p/chromium/issues/detail?id=306878

2
votes

I resolved this issue by giving width: 100.1% to the parent div of table.

For e.g.

<div class="col-md-7">
<div class="table-wrapper">
<table class="table>
<tr><td></td></tr>
</table>
</div>
</div>

for this HTML structure I written below CSS:

.table-wrapper{
    width: 100.1%;
}
table.table{
    width: 100%;
}

I am not sure if this solution will solve your issue or not, but I believe that it will help someone.

NOTE: I am using Bootstrap 3.3. and giving extra .1% width does not make visual difference on html page.

0
votes

@Nizam Setting the percentage of the table-wrapper +0.1% does not solve the issue because depending on the screen / tablesize it will still occur. You can easily try it by changing the size of the chrome window.

What I noticed is that full-width for the table wrapper will work and prevents the occurence of the 1px bug for a table. Otherwise a fixed width will also solve the problem. I know that this might not be a satisfying solution but I did not find a better workaround (not on bootstrap git and also not on the bug report comments for chrome).

Edit: An example solution that worked in my case is listed below. I fixed the size of the container on higher resolutions with a css that "overwrites" my previously used col-lg-8.

HTML:

<div class="col-lg-f1 col-xs-12">
    <div class="panel panel-primary">
        <div class="panel-heading">
        ...
        </div>
        <table id="city_table" name="test_table" class="table table-hover" >
            <thead>
            ...
            </thead>
            <tbody>
            ....
            </tbody> 
        </table>
    </div>
</div>

CSS:

@media (min-width: 1200px) {
    .col-lg-f1 {
        width: 900px;
    }       
}