'Bootstrap columns not working with tables

The bootstrap columns I am using stop working when I insert a table. The side column disappears which is empty disappear and the table does not fill the middle column. How do I insert a table into bootstrap column?

Here is the code:

      <div class="row">
        <div class="col-1">
        <!--Side Margin-->
        </div>
        <div class="col-10" id=main_container>
          <div class="table-responsive-lg">
            <table class="table table-responsive w-100">
              <thead class="thead-light">
              <tr>
                <th scope="row">Rank</th>
                <th scope="row">Team</th>
                <th scope="row">Change</th>
              </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Team1</td>
                  <td>- - - - </td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Team 2</td>
                  <td>- - - - </td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Team 3</td>
                  <td>- - - - </td>
                </tr>
                <th scope="row">4</th>
                  <td>Team 4</td>
                  <td>- - - - </td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Team 5</td>
                  <td>- - - - </td>
                </tr>
                <tr>
                  <th scope="row">6</th>
                  <td>Team 6</td>
                  <td>- - - - </td>
                </tr>
                <tr>
                  <th scope="row">7</th>
                  <td>Team 7 </td>
                  <td>- - - - </td>
                </tr>
                <tr>
                  <th scope="row">8</th>
                  <td>Team 8</td>
                  <td>- - - - </td>
                </tr>
                <tr>
                 <th scope="row">9</th>
                  <td>Team 9</td>
                  <td> - - - - </td>
                </tr>
                <tr>
                 <th scope="row">10</th>
                 <td>Team 10</td>
                 <td>- - - - </td>
                </tr>
              </tbody>
            </table>
          </div>
          </span>
        </div>
      <div class="col-1">
      <!-- Side Margin-->
      </div>

And here is the result: image of table

There should be a side margin, table which spans the middle, and then another side margin.

htmlbootstrap-4


Solution 1:[1]

This works when I try it (bootstrap 4) :

  <div class="row">
    <div class="col-1">
    <!--Side Margin-->
    </div>
    <div class="col-10" id=main_container>
      <table class="table">
        <thead class="thead-light">
        <tr>
          <th scope="row">Rank</th>
          <th scope="row">Team</th>
          <th scope="row">Change</th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Team1</td>
            <td>- - - - </td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Team 2</td>
            <td>- - - - </td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Team 3</td>
            <td>- - - - </td>
          </tr>
          <th scope="row">4</th>
            <td>Team 4</td>
            <td>- - - - </td>
          </tr>
          <tr>
            <th scope="row">5</th>
            <td>Team 5</td>
            <td>- - - - </td>
          </tr>
          <tr>
            <th scope="row">6</th>
            <td>Team 6</td>
            <td>- - - - </td>
          </tr>
          <tr>
            <th scope="row">7</th>
            <td>Team 7 </td>
            <td>- - - - </td>
          </tr>
          <tr>
            <th scope="row">8</th>
            <td>Team 8</td>
            <td>- - - - </td>
          </tr>
          <tr>
           <th scope="row">9</th>
            <td>Team 9</td>
            <td> - - - - </td>
          </tr>
          <tr>
           <th scope="row">10</th>
           <td>Team 10</td>
           <td>- - - - </td>
          </tr>
        </tbody>
      </table>
    </div>
  <div class="col-1">
  <!-- Side Margin-->
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 maqc

Related Questions