html - How to put the columns in a line (bootstrap table)

Question

I want to ask how can I vertically align the table columns. For example if I have table x and table y and then I add some content between the tables how can I put the columns in a same line (vertically in same position). I tried bootstrap classes but nothing works. Should I add padding or margin? Also I want table to be responsive (bootstrap class table-responsive). Here is a code:
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>

标签： htmlcsstwitter-bootstrap

Answer 1

Please try this,

You can add table inside th col-6 makes two row of table.

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