Question

我正在使用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>内的文字按中心对齐

Answer 1

好像你错过了“thead”。要正确应用引导程序样式，您需要确保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>

Answer 2

解决！

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

.withoutTransfer{
    white-space: nowrap;
}

然后在表格中使用它：

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

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

Answer 3

试试这个

如果您应用规则＆＃39; table-layout：fixed＆＃39;

设置表格单元格的宽度在表格中 - 这在使用表格时帮助了我很多细胞大小问题。如果符合表格的目的，我建议不要只使用DIV来安排你的内容 - 显示多维数据。

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

Bootstrap表中表头列的宽度

3 个答案: