Troubleshooting border problems with Bootstrap 3 tables

Recently, I encountered a problem with the Bootstrap 3 table-bordered where the right border was not showing up. Below is the code snippet of my table:

<table class="table table-bordered table-hover">
...
</table>

Upon inspecting the table visually, I noticed that the right border was missing. Here's an image showcasing the issue:

https://i.sstatic.net/PGH1f.png

Furthermore, there were instances where even the horizontal borders disappeared like in this image: https://i.sstatic.net/ENMmE.png

The peculiar thing is that this problem only seems to occur in Firefox. Any ideas on why my borders are vanishing?

htmltwitter-bootstrapcss

Answer №1

There seems to be a bug in the code, make sure to include the tbody element.

If you use the .table-bordered class without an empty <tbody>, the borders might not display as expected.

You can refer to this page for more information: https://bugzilla.mozilla.org/show_bug.cgi?id=409254

$('tbody').addClass('hidden');

$('button').on('click',function(){
    tr='<tr><td>td</td><td>td</td><td>td</td><td><button type="button" onclick="$(this).closest(\'tr\').remove();" class="btn btn-danger">Remove</button></td></tr>';
    $('tbody').removeClass('hidden');
    $('tbody').append(tr);
});

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

Displaying text on an image when hovering over it

I have tried various solutions that I came across, but none of them have been successful so far. My goal is to display dynamic text over an image when the user hovers over it. Additionally, I would like to change the hover color. Currently, the text is alw ...

htmlcsshover

HTML/Angular tutorial: Sharing an On-Click value with a different HTML element within the same component

As a newcomer to this, I could really use some guidance. Currently, I have a Mat Table that is displaying a specific range of data from my firestore. My goal is to be able to click on a particular row and have its data appear in a list below the table. I ...

htmlangularangular-material

What methods can I use to ensure my HTML/CSS code is compatible with all browsers? It functions properly on Chrome but encounters issues on Safari, Edge, and other

My hosting for the website is with bluehost, and interestingly when viewed on Chrome, everything appears perfect. However, upon switching to Safari, I noticed that the background of the about me section is not black as intended, and the footer seems to be ...

htmlcss

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

I am facing an issue with multiple color strings retrieved from the database. Each color string needs to be converted to lowercase and then passed as inline styles: const colorPickerItem = color => ( <View style={{backgroundColor: color.toLowerC ...

javascriptcssreactjsreact-native

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...

cssfontsgoogle-fontsvariable-fonts

Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

I had previously inquired about customizing the Bootstrap 5 navbar in this post: Adjust navbar height to be smaller and I received some helpful answers. Thank you to everyone who responded. However, I now have a follow-up question: I am interested in ch ...

cssbootstrap-5

Swap the < symbol with &gt; and & with &amp; within a specific node or location in an XML document

Hello everyone, I have a XML file with a node named Section, where certain characters like & and < are treated as invalid. I need to replace < with &lt; and & with &amp; only within the Section Node. Currently, I am using the following Java ...

javascripthtml

"Encountering a bug with Angular-bootstrap pagination displaying an undefined function

Attempting to implement angular-bootstrap pagination footer Encountering an error TypeError: undefined is not a function at Object.fn (http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2265:5) at Scope.$get.Scope.$digest (http://l ...

javascriptangularjstwitter-bootstrappagination

Is there a way to invert the order of elements in a scrollable container in Google Chrome?

The code snippet provided creates the desired effect, but unfortunately, it only seems to function properly in Firefox and Edge. In Chrome, while the elements are stacked correctly, there is no horizontal scroll bar, making the rightmost items hidden and i ...

cssflexbox

What steps can be taken to prevent alternate scrolling text from extending beyond the boundaries of its parent element?

I'm attempting to create a scrolling effect where the text moves back and forth within its container. The current issue I'm facing is that the text goes beyond the width of the parent container before scrolling back. I want the text to smoothly s ...

htmlcss

Maintaining Portrait Lock for Viewport in HTML5/CSS3: A Guide

Can the orientation of a mobile device's view port be locked to portrait mode? I tried searching for a solution on Google, but was unable to find clear instructions on how to achieve this. ...

htmlcssmobileviewportportrait

I am experiencing difficulties with certain images not appearing on my website

Everything was running smoothly while I was working on my website locally. However, as soon as I uploaded it online, some of the images refused to load and are now missing. I built my website using wordpress version 3.7.1. If you'd like to take a loo ...

htmlwordpress

Showing text beside an image within a division

In my div, I have an image along with a paragraph and h6 text. My goal is to position the text on the right side of the image without it wrapping underneath. I've experimented with floating both left and right, clearing, setting display to inline-blo ...

htmlcss

Adjust the position of an element based on changes in window size using jQuery

Wondering if this question is unique, as I've spent quite some time searching for a solution to this issue without any luck. Perhaps my search criteria aren't correct. I have a navigation bar that becomes fixed when it reaches the top of the vie ...

javascriptjqueryhtml

What is the best way to adjust the height of the second column downwards?

I am trying to achieve a 2-column layout with both columns at the same height. This is how it currently appears: And this is how I want it to be: Here is my code snippet: html { background-color: lightblue; font-family: Tahoma, Geneva, sans-serif ...

htmlcss

Utilize CSS to style active buttons with JavaScript

In an HTML document, the dynamic generation of divs and buttons using JavaScript can be seen in the code snippet below. <div style="background: rgb(247, 247, 247);"> <button class ="xyz" disabled="disabled">Button1</button> </div> ...

jquerycssbuttonapply

Icon toggling menu bug

I recently designed a menu featuring an animated icon that, when clicked, opens with two columns. The issue I'm facing is that after clicking on a link in the right column (view JSFiddle), the menu disappears but requires two additional clicks on the ...

javascriptjqueryhtmlcsstoggle

Is there a problem with addEventListener returning false?

What does keeping the third parameter as false in the line below signify? var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); ...

javascriptjqueryhtml

Utilize jQuery setInterval to dynamically add and remove classes on elements

My goal is to display my image in a way that resembles waving flames. I decided to achieve this effect by using two layers (flame tongues) stacked on top of each other in the same position. My initial approach was to hide one flame tongue while showing the ...

javascriptjqueryhtmlcss