Блог

Главная - Вопросы по программированию - Как поместить столбцы в строку (таблица начальной загрузки)

Как поместить столбцы в строку (таблица начальной загрузки)

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я хочу спросить, как я могу выровнять столбцы таблицы по вертикали. Например, если у меня есть таблица x и таблица y, а затем я добавляю некоторое содержимое между таблицами, как я могу поместить столбцы в одну строку (вертикально в том же положении). Я пробовал классы начальной загрузки, но ничего не работает. Должен ли я добавить отступы или поля? Также я хочу, чтобы таблица была адаптивной (таблица класса начальной загрузки-responsive). Вот код:
https://codepen.io/S4UCY/pen/OJNWqzg?editors=1100

 .container {
    position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.table td,
.table th {
  width: 50%;
  padding-left: 10px;
  word-break: break-word;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container">
            <h2><i class="fas fa-home"></i> Table x</h2>
        <table class="table table-responsive">
          <thead>
            <tr>
              <th scope="col">Column 1</th>
              <th scope="col">Column 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
            </tr>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
            </tr>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
            </tr>
          </tbody>
        </table>
  <p>Suspendisse potenti. Sed eu dui at magna finibus vehicula. Suspendisse sagittis ipsum arcu. Quisque non elit et purus finibus vehicula. Vivamus faucibus tincidunt erat, sit amet auctor risus luctus nec. Nunc commodo tristique enim, et rhoncus</p>
    <h2><i class="fas fa-home"></i> Table y</h2>
    <table class="table table-responsive">
          <thead>
            <tr>
              <th scope="col">Column 1</th>
              <th scope="col">Column 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam</td>
            </tr>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisis</td>
            </tr>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisisEtiam facilisisEtiam facilisis</td>
            </tr>
          </tbody>
        </table>
      </div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

Ответ №1:

Проблема в том, что .table-responsive класс меняется display с значения по умолчанию table на block . Поскольку этот класс больше ничего для вас не делает (по крайней мере, в опубликованном вами коде), то простое удаление его сработает — смотрите Пример ниже.

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

Чтобы расположить таблицы по центру на странице, вам сначала нужно задать желаемую ширину (или max-width), а затем установить margin:auto , например

 .table { max-width:1000px; margin:auto; }

Рабочий фрагмент (щелкните ссылку «Развернуть фрагмент», чтобы просмотреть его во весь экран и выстроить столбцы таблицы в ряд.) 

 .container {
    position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.table td,
.table th {
  width: 50%;
  padding-left: 10px;
  word-break: break-word;
}

.table { 
  max-width:1000px; 
  margin:auto; 
}
    
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container">
            <h2><i class="fas fa-home"></i> Table x</h2>
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Column 1</th>
              <th scope="col">Column 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
            </tr>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
            </tr>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
            </tr>
          </tbody>
        </table>
  <p>Suspendisse potenti. Sed eu dui at magna finibus vehicula. Suspendisse sagittis ipsum arcu. Quisque non elit et purus finibus vehicula. Vivamus faucibus tincidunt erat, sit amet auctor risus luctus nec. Nunc commodo tristique enim, et rhoncus</p>
    <h2><i class="fas fa-home"></i> Table y</h2>
    <table class="table">
          <thead>
            <tr>
              <th scope="col">Column 1</th>
              <th scope="col">Column 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam</td>
            </tr>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisis</td>
            </tr>
            <tr>
              <th class="table-cell" scope="row">Etiam</th>
              <td>Etiam facilisisEtiam facilisisEtiam facilisis</td>
            </tr>
          </tbody>
        </table>
      </div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

Ответ №2:

Пожалуйста, попробуйте это,

Вы можете добавить таблицу внутри th col-6, создающего две строки таблицы.

 <div class="row">
    <div class="col-6">
       ------table-1----
    </div>
    <div class="col-6">
       ------table-2----
    </div>
</div>
  

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-6">
      <h2><i class="fas fa-home"></i> Table x</h2>
      <table class="table table-responsive">
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="table-cell" scope="row">Etiam</th>
            <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
          </tr>
          <tr>
            <th class="table-cell" scope="row">Etiam</th>
            <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
          </tr>
          <tr>
            <th class="table-cell" scope="row">Etiam</th>
            <td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
          </tr>
        </tbody>
      </table>
      <p>Suspendisse potenti. Sed eu dui at magna finibus vehicula. Suspendisse sagittis ipsum arcu. Quisque non elit et purus finibus vehicula. Vivamus faucibus tincidunt erat, sit amet auctor risus luctus nec. Nunc commodo tristique enim, et rhoncus</p>
    </div>
    <div class="col-6">
      <h2><i class="fas fa-home"></i> Table y</h2>
      <table class="table table-responsive">
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="table-cell" scope="row">Etiam</th>
            <td>Etiam</td>
          </tr>
          <tr>
            <th class="table-cell" scope="row">Etiam</th>
            <td>Etiam facilisis</td>
          </tr>
          <tr>
            <th class="table-cell" scope="row">Etiam</th>
            <td>Etiam facilisisEtiam facilisisEtiam facilisis</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

Комментарии:

1. Пожалуйста, объясните, какие изменения вы внесли в исходный код и как это решает проблему. Ответы, содержащие только код, не приветствуются, поскольку они не придают сайту такой ценности, как ответы, содержащие объяснение.

2. Это не совсем то, что я ищу, я хочу, чтобы таблицы были выровнены по вертикали (каждая таблица column1 и column2 в том же положении, но по вертикали).

3. Как мне центрировать таблицы по середине должен ли я добавить поля или отступы и добавить некоторый интервал между столбцами