Html 引导表中表头列的宽度

我使用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>
      ....

但是，当我打印数据时，它看起来非常难看：

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

如何使元素中包含文本的列具有正常宽度，以适应单元格中的文本

如何使所有内部文本按中心对齐

---

你好像错过了西亚特。要正确应用引导样式，需要确保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>

解决了

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

.withoutTransfer{
    white-space: nowrap;
}

然后在表中使用它：

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

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

试试这个

如果您将“table layout:fixed”（表格布局：固定）规则应用于表格，则设置表格单元格的宽度-这有助于我在使用表格时解决许多单元格大小问题。如果内容适合表格的用途，我不建议切换到仅使用div来安排内容，以显示多维数据

应用和标记，结果仍然相同。

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