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:

Furthermore, there were instances where even the horizontal borders disappeared like in this image:

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

Steps for designing an HTML table that expands and collapses partially

I am currently revamping an old "Top Screens" page by expanding the display from the top 30 to the top 100 in a basic html table format. However, I only want to show the top 20 on page load with an expand/collapse feature. While I have come across examples ...

javascriptjqueryhtmlcsshtml-table

obtain the equivalent offsetX value for touch events as for mouse events

Greetings! I am currently attempting to retrieve the offsetX and Y values of a touch event, which ideally should match the offsetX value of a mouse event. In order to achieve this, I have implemented the following code: ev.offsetX = ev.targetTouches[0].p ...

javascripthtmlcanvas

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

htmlcss

Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while d ...

htmlcss

All you need to know about the properties of CSS ul

When I specify .a ul{} .a ul li{} as well as .b ul{} .b ul li{} will the properties of ul in .b be completely isolated from the properties of ul in .a? Or will they have some commonalities? I am looking to ensure that the styles for ul remain entirely ...

htmlcsscss-selectors

I'm running into an InvalidSelectorError and I could use some assistance in properly defining

As I gaze upon a massive dom tree, my task using NodeJS/Selenium is to locate an element by the title attribute within an anchor tag and then click on the associated href. Despite being a newcomer to regex, I am encountering numerous errors already. Below ...

javascripthtmlseleniumdomxpath

What methods can be used to choose specific rows while styling columns with CSS?

As an exercise in CSS styling, I have successfully transformed an unordered list into columns. But now, I am curious if it is possible to target and style the "rows" within these columns. This is the CSS code currently in use: ul.popular{ margin:15px ...

css

CompletePage script, individual automatic scrolling

Having trouble with my fullPage.js implementation. I have a total of 5 sections and I'm trying to set different scrolling behaviors for each section. Specifically, I want Sections 1 through 3 to auto-scroll and Section 4.1 to 4.2 to use normal scroll. ...

javascriptjqueryhtmlscrollfullpage.js

Why should one incorporate semantic markup into their HTML documents?

During my studies, I learned that tags provide a definition to content in HTML. For example: <section>It's a section</section> <article>It's an article</article> By correctly using semantic markup in my HTML, the documen ...

htmlw3c-validationsemantic-markup

Setting a fixed data value within a div for subsequent retrieval through a function

I found a helpful example that demonstrates how to convert numbers into words. You can check it out here. The function for converting numbers into words is implemented in the following HTML code: <input type="text" name="number" placeholder="Number OR ...

javascriptjqueryhtml

Customized selection groups for dropdown menu based on alphabetical order

I am dynamically generating a select list from an array of data and I want to group the options alphabetically. For example, here is the data: data = [ ['bcde','21254'], ['abcd','1234'], ['abcde',' ...

javascriptjqueryhtmlselectoptgroup

How can I display real-time streams from multiple IP cameras on an HTML page using Flask and Python?

I am currently dealing with a collection of cameras and the corresponding URLs in RTSP format. I managed to create a simple script that extracts the camera URL from the camera_config JSON file, but now I'm facing the challenge of embedding these video ...

pythonhtmljsonflaskrtsp

Transform your ordinary HTML select into a stylish span with this custom CSS class

I need help making a select element appear like a span under certain conditions. The CSS class I currently have works with input boxes, but not with dropdowns. Is there any advice on how to style the select element to look like a span without actually repl ...

jquerycssdrop-down-menuhtml

Concealing Website Elements with javascript based on class assignments

Despite my hesitation, I have to ask this question after unsuccessful searches in related articles. In my code, I have 7 nav links all with the same class. Due to the length of the HTML, I am looking for a way to hide contents until the link is clicked, an ...

javascriptcss

Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images. Does anyone have any ideas, solutions, or hints to so ...

htmlcsstwitter-bootstrap-3image-gallerymousehover

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

javascriptjqueryhtmlcssgetelementbyid

Maintain text while transitioning to another page

On my webpage (refer to image for details), users need to select options through a series of steps. The process involves clicking on a link in the top box, then entering a search term in the searchbox to display relevant links in div1. Clicking on a link ...

javascriptjqueryhtmlajax

Using angular 7 to apply a dynamic CSS class on a span element

I want to dynamically change the CSS class of a span element in an ngx datatable based on the value. Here is my HTML code: <ngx-datatable #orderinvoice class="bootstrap" [rows]="invoiceSource" [headerHeight]="50" [footerHeight]="50" [rowHe ...

htmlcssangularng-class

Is your CSS not reflecting changes in Node.js?

I am having trouble getting the CSS to update in the browser using Browser Sync via Gulp on Node.js. What could be the issue? Below is my Gulp.js file: var themename = 'playtest haha 1'; var gulp = require('gulp'), // Prepare ...

htmlnode.jswordpressnpmgulp

Utilizing SASS in Eclipse for Java EE Development

Although I have already looked at this Stack Overflow question, it did not provide the solution I am seeking. As a Java Web Developer, I have been utilizing Less for my CSS pre-processing needs. However, I am now interested in transitioning to Sass due to ...

javacsseclipsesass