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">&nbsp; <table class="table table-striped table-dark">&nbsp; &nbsp; <h1 class="table-headers">Education</h1>&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">#</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">School</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Years</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Program</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="row">1</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>Hacettepe University, Ankara</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>2010-2014</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>BA, Composition and Orchestral Conducting</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="row">2</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>Istanbul Technical University</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>2015-2020</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Ph.D.(c), Orchestral Conducting</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; &nbsp; <h1 class="table-headers">Experience</h1>&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">#</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Institution</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Years</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Position</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="row">1</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>Hacettepe University, Ankara</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>2014-2015</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Intern</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="row">2</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>Istanbul Technical University</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>2015-2020</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Research Assistant</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>PS：你所拥有的与CSS表格无关，而是常规的HTML表格。