html - 强制 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赋给包含large的th图片。

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