Html 强制引导3表格标题为固定宽度

我需要固定表中标题列的宽度，而不考虑常规行中的内容。这是为了避免内容被分成两行，如下所示，这看起来非常不整洁：

有什么方法可以做到这一点，最好不要玩弄每个表行的填充，因为我对当前的间距很满意。您可以在上看到完整的表，我已经包含了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>

---

添加

表格布局：固定
至
表格
，然后将
宽度
添加至包含大图像的
th

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

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