表格边框显示为chrome，但不显示为Firefox或IE

Question

我正在使用Bootstrap v3.0.0对表头进行下拉。 我在设计时使用chrome进行查看，一切看起来都很好。 现在，当我在Firefox或IE中检查页面时，单元格的边框丢失了。

这是我的下拉菜单的html。

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

类btn-th的CSS

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

chrome中的外观：

Firefox中的外观：

当我右键单击并检查元素并选择计算时，Firefox显示的内容。 如您所见-Firefox说它应该有一个底部边框！

在IE中，既不显示顶部边框也不显示底部边框：

两侧的单元格都是标准的，没有钟声或口哨声，并且在所有浏览器上都显示所有边框。

我在这里想念的是什么-我的边界在哪里？

Answer 1

我也遇到缺少表格边框的问题。 我的解决方案是：

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

表格行的边框：

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

我在布局中使用的是Bootstrap，并且该表还具有引导CSS类，例如“ table table-striped table-bordered”

当我尝试使用以下解决方案时，此解决方案对我有用

    border-collapse: separate !important;

它对我来说无法正常工作。