CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
GPA
GPA

Reputation: 111

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

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/[email protected]/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>

Upvotes: 0

Views: 999

Answers (2)

FluffyKitten
FluffyKitten

Reputation: 14312

The problem is that the .table-responsive class is changing display from the default table to block. As this class is not doing anything else for you (in the code you posted at least), then simply removing it will work - see the example below.

You also asked in a comment about how to centre a table. As you are using bootstraps table classes, the table is set to 100%, so there is nothing to centre as its already taking up the full width.

To centre the tables in the page, you first need to set the width (or max-width) that you want them to be and then set margin:auto, e.g.

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

Working Snippet (click the "Expand Snippet" link to see it in full screen and see the table columns lining up.) 

.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/[email protected]/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>

Upvotes: 1

Rayees AC
Rayees AC

Reputation: 4659

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/[email protected]/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>

Upvotes: 1

Related Questions