Bootstrap 表中表头列的宽度答案

【问题标题】：Width of table header columns in Bootstrap tableBootstrap 表中表头列的宽度
【发布时间】：2016-01-08 15:21:00
【问题描述】：

我正在使用 Bootstrap 并且有一个具有以下结构和样式的表：

  <table class="table table-bordered">
      <tr>
          <th>Keyword</th>
          <th>AdWords top</th>
          <th>AdWords right</th>
          <th>AdWords total</th>
          <th>URLs of top AdWords</th>
          <th>URLs of right AdWords</th>
          <th>Non-Adwords results</th>
          <th>Non-Adwords urls</th>
          <th>Total links on page</th>
          <th>Total SERP results</th>
          <th>Cached SERP</th>
      </tr>
      ....

但是，当我打印出我的数据时，它看起来真的很丑：

这就是为什么我有几个问题：

如何在 <th> 元素内使用文本使列的正常宽度以适应单元格内的文本
如何使<th>中的所有文字居中对齐

【问题讨论】：

标签： html twitter-bootstrap html-table

【解决方案1】：

您似乎缺少“头”。要正确应用引导样式，您需要确保您的 html 标记是正确的。

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

【讨论】：

应用了和标签，结果还是一样。

【解决方案2】：

解决了！

在 SCSS 文件中添加一个新的自定义类：

.withoutTransfer{
    white-space: nowrap;
}

然后在表中使用：

  <thead>
    <tr class="withoutTransfer">
      ....
    </tr>
  </thead>

现在表格标题看起来很漂亮。

【讨论】：

【解决方案3】：

试试这个

如果您将规则“表格布局：固定”应用于表格，则为表格单元格设置宽度 - 这有助于我在使用表格时解决许多单元格大小问题。如果它符合表格的目的 - 显示多维数据，我不建议切换到仅使用 DIV 来排列您的内容。

`table-layout: fixed; width: 100%`;

【讨论】：