CODEWITHSUNDEEP
htmltwitter-bootstrapcss
b24
b24

Reputation: 2473

bootstrap 3 table-bordered border issue

Hi I try bootstrap 3 table-bordered and my right border not shown. This is my table:

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

And this is an image of my table. My right border is invisible like this:

enter image description here

And sometimes my horizontal border also invisible like this: enter image description here

This issue only appear in Firefox. Where is my borders?

Upvotes: 1

Views: 1650

Answers (2)

b24
b24

Reputation: 2473

Ohhh, this is a small accidentally issue because of browser zoom.

I found my answer here and this is an old Firefox bug Table cell border widths render incorrectly at various zoom levels.

Unfortunately, these bugs was wasted much time from me. Hoping to fix this bug in the near future.

Upvotes: 0

Sylvain Martin
Sylvain Martin

Reputation: 2375

This is a bug, you need to add the tbody

.table-bordered with an empty <tbody> is missing borders.

look at this page 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);
});

Upvotes: 2

Related Questions