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

自定义.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%;
    }