表格邊框顯示為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;

它對我來說無法正常工作。