將Bootstrap 3表格標題強制爲固定寬度

Question

我需要修正我的Bootstrap 3表格中標題列的寬度，而不管常規行中的內容如何。這是爲了避免內容被分成兩行，如下圖所示，看起來非常不整潔：

有沒有什麼辦法可以做到這一點，最好是不用爲每個表格行填充，因爲我很高興與當前的間距。您可以在http://find-minecraft-servers.com/處看到完整的表格，並且我已經包含HTML和與下表關聯的自定義CSS。表格的內容由PHP生成，因此每個表格單元格中的值的長度可能會發生變化。

<table class="table bigtable" width="100%;"> 
     <thead> 
     <tr> 
      <th class="text-center"><i class="fa fa-list-ol"></i> RANK</th> 
      <th class="text-center"><i class="fa fa-info-circle"></i> NAME</th> 
      <th class="text-center"><i class="fa fa-server"></i> SERVER</th> 
      <th class="text-center"> 
      <a href="?sort=votes" style="text-decoration:none;color:#fff;"> 
       <i class="fa fa-thumbs-o-up"></i> VOTES <i class="fa fa-sort" style="color:#84fb88;"></i> 
      </a> 
      </th> 
      <th class="text-center"><i class="fa fa-dashboard"></i> STATUS</th> 
      <th class="text-center"> 
      <a href="?sort=players" style="text-decoration:none;color:#fff;"> 
       <i class="fa fa-users"></i> PLAYERS <i class="fa fa-sort" style="color:#84fb88;"></i> 
      </a> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     CONTENT... 
    </tbody> 
</table> 

Custom.css：

.bigtable thead { 
    background-color: #12bbb9; 
    color: #fff; 
    font-size: 14px; 
} 

.bigtable thead tr th { 
    padding:8px 5px 8px 5px; 
} 

Answer 1

添加table-layout:fixed到table，然後給width到含有大圖像的th。

.table { 
     margin-bottom: 20px; 
     max-width: 100%; 
     table-layout: fixed; /*newly added*/ 
     width: 100%; 
    }