Как разместить две таблицы с заголовками рядом друг с другом, используя CSS

Question

    <h1 class="floor">Floor Scale</h1>
    <table>
      <thead>
          <th>Size</th>
          <th>Capacity</th>
          <th>Color</th>
      </thead>
      <tbody>
        <tr>
          <td>4' x 4'</td>
          <td>5000 lbs</td>
          <td>Blue</td>
        </tr>
        <tr>
          <td>4' x 4'</td>
          <td>10,000 lbs</td>
          <td>Black</td>
        </tr>
      </tbody>
  </table>

    <h1 class="balance">Balance Scales</h1>
    <table>
      <thead>
          <th>Size</th>
          <th>Capacity</th>
          <th>Color</th>
      </thead>
      <tbody>
        <tr>
          <td>1' x 1'</td>
          <td>5,000g</td>
          <td>White</td>
        </tr>
        <tr>
          <td>1' x 1'</td>
          <td>200,000g</td>
          <td>White</td>
        </tr>
      </tbody>
    </table>

С указанным выше кодом они будут размещены друг на друге, а не рядом. Я пытаюсь разместить их рядом друг с другом. Было бы здорово, если бы вы могли указать, как это можно сделать, как в HTML, так и в CSS.

Answer 1

Оберните вашу таблицу в div и эту таблицу в container и используйте display:flex для размещения заголовков и таблицы рядом друг с другом.

Кроме того, чтобы сделать ее красивой и хорошо пространство между ними используйте justify content space around

Вы можете прочитать о гибких коробах здесь и об использовании гибкости в CSS.

Выполните фрагмент ниже.

.container {
      display: flex;
    justify-content: space-around;
}

<div class="container">
  <div class="table">
    <h1 class="floor">Floor Scale</h1>
    <table>
      <thead>
        <th>Size</th>
        <th>Capacity</th>
        <th>Color</th>
      </thead>
      <tbody>
        <tr>
          <td>4' x 4'</td>
          <td>5000 lbs</td>
          <td>Blue</td>
        </tr>
        <tr>
          <td>4' x 4'</td>
          <td>10,000 lbs</td>
          <td>Black</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="table">

    <h1 class="balance">Balance Scales</h1>
    <table>
      <thead>
        <th>Size</th>
        <th>Capacity</th>
        <th>Color</th>
      </thead>
      <tbody>
        <tr>
          <td>1' x 1'</td>
          <td>5,000g</td>
          <td>White</td>
        </tr>
        <tr>
          <td>1' x 1'</td>
          <td>200,000g</td>
          <td>White</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

Вы также можете попробовать установить ширину и встроенный дисплей:

.row {
  width: 100%;
}

.column {
  display: inline-block;
  width: 49%;
}

<div class="row">
<div class="column">
    <h1 class="floor">Floor Scale</h1>
    <table>
      <thead>
          <th>Size</th>
          <th>Capacity</th>
          <th>Color</th>
      </thead>
      <tbody>
        <tr>
          <td>4' x 4'</td>
          <td>5000 lbs</td>
          <td>Blue</td>
        </tr>
        <tr>
          <td>4' x 4'</td>
          <td>10,000 lbs</td>
          <td>Black</td>
        </tr>
      </tbody>
     </table>
    </div>
    
    <div class="column">
     <h1 class="balance">Balance Scales</h1>
    <table>
      <thead>
          <th>Size</th>
          <th>Capacity</th>
          <th>Color</th>
      </thead>
      <tbody>
        <tr>
          <td>1' x 1'</td>
          <td>5,000g</td>
          <td>White</td>
        </tr>
        <tr>
          <td>1' x 1'</td>
          <td>200,000g</td>
          <td>White</td>
        </tr>
      </tbody>
    </table>
    </div>
</div>