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 {
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>

P.S .：您所拥有的与CSS表无关，而只是常规的HTML表。

Answer 2

您可以为此设置列宽：

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

请注意，您can't use headers inside a table是here，而是可以使用caption元素并根据需要设置其样式。您可以阅读关于该元素的更多{{3}}。

因此您的表可以看起来像这样：

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>

引导表未正确对齐

2 个答案: