Bootstrap таблицы не выровнены должным образом - PullRequest
Новая
       4

Bootstrap таблицы не выровнены должным образом

0 голосов
/ 29 марта 2020

Я создал две таблицы, используя 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>

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

Для этого можно установить ширину столбцов: 

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

В качестве примечания, вы не можете использовать заголовки внутри таблицы , вместо этого вы можете использовать caption элементы и стиль, как вы будете sh. Вы можете прочитать больше здесь об этом элементе.

Таким образом, ваши таблицы могут выглядеть примерно так: 

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>
0 голосов
/ 29 марта 2020

Для этого нужно поместить все содержимое в одну таблицу: 

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 таблицами.

...