Bootstrap 表未正确对齐

Question

我使用 Bootstrap 创建了两个表，它们的内容量相似。尽管如此，这两个不同的表并没有正确对齐。我希望这些表的列能够像 MS Excel 中那样正确对齐。显示问题的代码和图片如下：<div class="container-fluid">  <table class="table table-striped table-dark">    <h1 class="table-headers">Education</h1>    <thead>      <tr>        <th scope="col">#</th>        <th scope="col">School</th>        <th scope="col">Years</th>        <th scope="col">Program</th>      </tr>    </thead>    <tbody>      <tr>        <th scope="row">1</th>        <td>Hacettepe University, Ankara</td>        <td>2010-2014</td>        <td>BA, Composition and Orchestral Conducting</td>      </tr>      <tr>        <th scope="row">2</th>        <td>Istanbul Technical University</td>        <td>2015-2020</td>        <td>Ph.D.(c), Orchestral Conducting</td>      </tr>    </tbody>  </table>  <table class="table table-striped table-dark">    <h1 class="table-headers">Experience</h1>    <thead>      <tr>        <th scope="col">#</th>        <th scope="col">Institution</th>        <th scope="col">Years</th>        <th scope="col">Position</th>      </tr>    </thead>    <tbody>      <tr>        <th scope="row">1</th>        <td>Hacettepe University, Ankara</td>        <td>2014-2015</td>        <td>Intern</td>      </tr>      <tr>        <th scope="row">2</th>        <td>Istanbul Technical University</td>        <td>2015-2020</td>        <td>Research Assistant</td>      </tr>    </tbody>  </table></div>

Answer 1

您可以为此设置列宽：

table th {width: 10%}
table td {width: 30%}

顺便说一句，您不能在表格内使用标题，而是可以使用caption元素并根据需要设置其样式。

所以你的表可以看起来像这样：

table th {width: 10%}

table td {width: 30%}

table caption {font-size: 2em; caption-side: top;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container-fluid">

  <table class="table table-striped table-dark">

    <caption class="table-headers">Education</caption>

    <thead>

      <tr>

        <th scope="col">#</th>

        <th scope="col">School</th>

        <th scope="col">Years</th>

        <th scope="col">Program</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <th scope="row">1</th>

        <td>Hacettepe University, Ankara</td>

        <td>2010-2014</td>

        <td>BA, Composition and Orchestral Conducting</td>

      </tr>

      <tr>

        <th scope="row">2</th>

        <td>Istanbul Technical University</td>

        <td>2015-2020</td>

        <td>Ph.D.(c), Orchestral Conducting</td>

      </tr>

    </tbody>

  </table>

  <table class="table table-striped table-dark">

    <caption class="table-headers">Experience</caption>

    <thead>

      <tr>

        <th scope="col">#</th>

        <th scope="col">Institution</th>

        <th scope="col">Years</th>

        <th scope="col">Position</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <th scope="row">1</th>

        <td>Hacettepe University, Ankara</td>

        <td>2014-2015</td>

        <td>Intern</td>

      </tr>

      <tr>

        <th scope="row">2</th>

        <td>Istanbul Technical University</td>

        <td>2015-2020</td>

        <td>Research Assistant</td>

      </tr>

    </tbody>

  </table>

</div>

Answer 2

为此，您需要将所有内容放入一张表中：

table {

width: 100%;

}

<div class="container-fluid">

  <table class="table table-striped table-dark">

    <h1 class="table-headers">Education</h1>

    <thead>

      <tr>

        <th scope="col">#</th>

        <th scope="col">School</th>

        <th scope="col">Years</th>

        <th scope="col">Program</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <th scope="row">1</th>

        <td>Hacettepe University, Ankara</td>

        <td>2010-2014</td>

        <td>BA, Composition and Orchestral Conducting</td>

      </tr>

      <tr>

        <th scope="row">2</th>

        <td>Istanbul Technical University</td>

        <td>2015-2020</td>

        <td>Ph.D.(c), Orchestral Conducting</td>

      </tr>

    </tbody>

    <h1 class="table-headers">Experience</h1>

    <thead>

      <tr>

        <th scope="col">#</th>

        <th scope="col">Institution</th>

        <th scope="col">Years</th>

        <th scope="col">Position</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <th scope="row">1</th>

        <td>Hacettepe University, Ankara</td>

        <td>2014-2015</td>

        <td>Intern</td>

      </tr>

      <tr>

        <th scope="row">2</th>

        <td>Istanbul Technical University</td>

        <td>2015-2020</td>

        <td>Research Assistant</td>

      </tr>

    </tbody>

  </table>

</div>

PS：你所拥有的与CSS表格无关，而是常规的HTML表格。