CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
BeanFrog
BeanFrog

Reputation: 2315

Table border appears in chrome but not firefox or IE

I'm using Bootstrap v3.0.0 to make a dropdown on a table header. I used chrome to view as I was designing, and everything looked fine. Now, when I check the page in Firefox or IE, the border of my cell is missing.

Here is the html for my dropdown.

<th class="dropdown">
    <button class="btn-th dropdown-toggle" type="button" data-toggle="dropdown" style="min-width:82px;">
        Colour
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" onclick="filterRows('', 0); return false;">Show All</a></li>
        <li><a href="#" onclick="filterRows('colour','Red'); return false;">Red</a></li>    
        <li><a href="#" onclick="filterRows('colour','Blue'); return false;">Blue</a></li>  
        <li><a href="#" onclick="filterRows('colour','Green'); return false;">Green</a></li>    
        <li><a href="#" onclick="filterRows('colour','Yellow'); return false;">Yellow</a></li>  
        <li><a href="#" onclick="filterRows('colour','Brown'); return false;">Brown</a></li>                        
    </ul>
</th>

The css for the class btn-th

.btn-th {
  font-weight: bold;
  padding: 0 !important;

  cursor: pointer;
  border-radius: 0;
  border-width: 0px;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: transparent;
  background-color: transparent;
}

What it looks like in chrome: What it looks like in chrome:

What it looks like in Firefox: enter image description here

And what Firefox shows when I right click and inspect element and choose computed. As you can see - Firefox says it should have a bottom border! enter image description here

In IE, neither the top nor the bottom border is present: enter image description here

The cells either side are a standard with no bells or whistles, and they are showing all borders on all browsers.

What am I missing here - where have my borders gone?

Upvotes: 1

Views: 1743

Answers (1)

Ankush Verma
Ankush Verma

Reputation: 103

I had the same problem with missing table border. My solution is:

table{
      border-collapse: collapse !important;
      border-spacing: 0px;
     border: 1px solid #DDD;
 }

And border for table rows:

    table tr{
       border-bottom: 1px solid #DDD !important;
      }

I am using Bootstrap either in my layout and the table has also bootstrap css classes like "table table-striped table-bordered"

This solution works for me, when I tried solution with

    border-collapse: separate !important;

it didn't work properly for me.

Upvotes: 1

Related Questions