javascript - 如何使 bootstrap 表头宽度与主体宽度对齐？

Question

我有一个 bootstrap 表，我有表头的背景色。由于我将表格宽度设置为自动，因此与主体宽度相比，标题宽度较小。我希望页眉宽度与主体宽度对齐。我在此处附加了一个 plunker 链接。

如何让header和body宽度对齐？

https://plnkr.co/edit/yIvC4XnOuEj6qVJH9rW8?p=preview

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <table class="table table-striped" style=" width:auto!important;">
    <thead>
      <tr style="background-color:red">
        <th>DETAILS</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

提前致谢!

Answer 1

如果您希望标题用于多列，请添加 colspan="3"

The colspan attribute defines the number of columns a cell should span.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <table class="table table-striped" style=" width:auto;">
    <thead>
      <tr style="background-color:red">
        <th colspan="3">DETAILS</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>