Adding a slight 1px right margin between an HTML table and its enclosing div in Bootstrap 3

Help! I'm trying to troubleshoot some HTML issues and can't figure out where this pesky 1px gap between my table and the wrapping div is coming from...

  • Just for reference, I am using Bootstrap.

I suspect that it could be a glitch in the Bootstrap engine causing this annoyance.

Check out these screenshots (with zoomed area) and corresponding CSS. Please note that the gap is specifically between <table class="table"> and <div class="panel-body">, not within the table itself.

(I've added a red border to highlight the white 1px gap)

Below are the computed styles for both the wrapping div "panel-body" and the table. Since Bootstrap is responsive, the sizes are dynamically calculated.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

It appears that there is a display problem in Chrome. To illustrate, here is the Bootstrap 3 panel with table example page as shown in Chrome:

Now, compare this same example in the latest version of FireFox, where the gap is not present:

Interestingly, this issue seems to be recognized by the Bootstrap team as well: https://github.com/twbs/bootstrap/issues/20123

This problem has also been reported on the Chrome bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=301234

Answer №2

To fix the problem, I adjusted the CSS for the parent div element of the table by setting its width to 100.1%.

Here's an example:

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

Based on this HTML structure, I created the following CSS rules:

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

While I can't guarantee that this solution will work for everyone, it may be beneficial to someone facing a similar issue.

NOTE: The code was developed using Bootstrap 3.3. Adding an extra .1% width didn't have a noticeable impact on the appearance of the HTML page.

Answer №3

@Nizam I have found that adjusting the percentage of the table-wrapper by +0.1% does not completely resolve the issue, as it can still occur depending on the screen or table size. This can be easily tested by resizing the chrome window.

What I have observed is that making the table wrapper full-width or using a fixed width can prevent the 1px bug from happening. While this may not be the perfect solution, I have not come across a better workaround in my search through Bootstrap git and Chrome bug report comments.

Edit: In my case, I was able to solve the problem by setting a fixed size for the container at higher resolutions, overriding the previously used col-lg-8 CSS class.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to effectively nest Bootstrap grid without needing to enclose columns within another

I need to create a grid layout with 8 columns on the left and 4 columns on the right. Within the 4 columns on the right, I want to divide it into 4 smaller columns and 8 larger columns. It is crucial that the grid layout does not wrap onto multiple lines. ...

twitter-bootstrapbootstrap-5

How to place a div with 100% width at the bottom of a float with a fixed width

Each day the same question seems to pop up, yet this particular issue has me stumped... My goal is a simple one - I aim to design a fixed width layout with 3 columns, while ensuring that the header and footer stretch across 100% of the screen. Everything ...

csshtml

Creating vibrant row displays in Vue.js: A guide to styling each row uniquely

I am not a front-end developer, so Vue and JS are new concepts for me. Currently, I am working on an application for managing sales. One of the components in my project involves displaying invoices in a list format. To make the rows visually appealing, I ...

javascripthtmlcssvue.js

Tips for adjusting the height of a selection box in jQuery Mobile

I am trying to make the select box height the same as the label (模板分類:). <select id="TamplateClass" style="height:1.5em">...</select> you can use CSS #TamplateClass{height:1.5em;} However, no matter what I try, the results are all th ...

cssjquery-mobile

Ways to efficiently display elements in a grid in real-time

Attempting to design a layout where each row consists of 3 cards using Bootstrap's Grid layout for responsiveness. The challenge lies in the fact that the card data is stored in JSON format, and the length of the JSON Object array may vary, leading t ...

javascriptcssvue.jsgrid-layoutbootstrap-vue

limiting jquery selector to target only the td elements within a table

I have a table generated by asp.net that functions as a slide show. To make the slide show work properly, I need to select only the root td elements of the table. This becomes an issue when the table has multiple rows. The jquery cycle plugin is being used ...

jqueryasp.nethtml

Using CSS3 easing on Mobile Safari can help create smooth transitions

Can anyone advise on how to recreate the easing/friction for touch events in Mobile Safari? I am trying to achieve a similar bounce-back effect when dragging contents past the top or bottom of a scroller. I experimented with the cubic-bezier easing functi ...

iphonehtmlcssmobile-safari

CSS - Mysterious Gaps Found in Div Block

Below is the code snippet I am currently working with: html { height: 100%; overflow: hidden; } body { height: 100%; color: #bdc3c7; font-family: Montserrat; background-color: #3E4651; } .nav { ...

htmlcss

Text fades into view from the bottom after a line break using CSS and JavaScript

I'm looking to create a unique fade reveal text effect for a multi-line H1. The goal is for each line of the text to fade up from its own row, rather than simply revealing from the bottom. Here's an example I've already developed, but it cu ...

jqueryhtmlcssanimationheading

The transparency of the TABLE must only be applied to a specific section

I need the table to have a transparent bottom and a clear top for better readability. Here is my attempted solution: .preview { background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%); background: -webkit-gradie ...

css

Enhancing Child Elements with CSS - Evaluating Rating Systems

Is there a way to change the opacity of certain images inside my div when hovering over them? Specifically, I want the 4th image and the first three to have an opacity value of 1. I've looked into using nth-child but am unsure how to implement it for ...

javascriptjqueryhtmlcss

Chrome does not support gradient, while Firefox does

When I attempt to utilize the webkit gradient tag specifically for Chrome, it fails to function altogether. On the other hand, when tested on Firefox using background:-moz-linear-gradient(#000, #888);, it operates smoothly. Despite this, applying backgrou ...

htmlcssfirefoxgoogle-chrome

Interact with webpage dropdown menus using Python

I'm currently working on a Python script that interacts with a webpage, specifically , to retrieve a (DNA sequence in fasta format) file. The file is automatically downloaded when a user clicks on a dropdown menu. Here's the dropdown menu: Dow ...

htmlcsspython-3.xselenium

Should I be concerned about including a non-existent CSS class?

When it comes to using jQuery and finding the values of text fields, adding classes seems like a common practice. However, I am concerned about how this may impact page loading. Is it efficient for the browser to search for all these classes? In the past, ...

asp.netcssjquery-selectors

Update the parent node in the Google Org Chart

This is my first time working with Google Charts and I have a couple of questions: Is there a method in the API to update the parent of an existing node? I am facing a challenge where I need to build a tree structure top-down, which means that I know the ...

javascriptjqueryhtmlcssgoogle-visualization

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Whenever I attempt to connect to send a servage SMTP, it gives me this error message: SMTP connect() failed. I have tried using the following settings: include('res/mailer/class.phpmailer.php'); $mail->SMTPDebug = 2; include('res/mai ...

javascriptphpcssemailsmtp

Creating a persistent gap BETWEEN li inline list items

I'm seeking a solution to create horizontal links using a list. I know that I need to apply the display: block property to the ul element and set display: inline for the li items. While there are several inquiries about maintaining a consistent width ...

cssinlinehtml-lists

Verification symbols in Unicode

I'm on the hunt for a universal checkmark symbol that is compatible across various operating systems and web browsers. I've tested out the following two options: Version 1: ✓ Version 2: ✔ (source) However, these symbols seem to be working ...

htmlunicodeasciihtml-entities

What is the best way to incorporate the parallax effect into a v-carousel?

Currently, I have a "v-carousel" containing multiple images and now I am looking to incorporate a parallax effect into it, similar to "v-parallax". <v-carousel cycle height="600" hide-delimiter-background show-arrows-on-hover> <v-carousel-i ...

cssvue.jsvuetify.js

Using Jquery to bind events for selecting focus in and out

There seems to be an issue with binding jQuery events to a select element. The desired behavior is for the .focus class to be added when the select is clicked. However, the logic breaks when an option is selected from the dropdown. See it in action here: ...

cssfocusjquery