Responsive-table does not fill the whole col in which it is nested

Question

I'm using bootstrap 4 in an Angular app.

On one of the component's html , I'm trying to nest a responsive table inside a grid row.

I followed the instructions to nest the "table" div inside another div of class "table-responsive", but still the table does not fill the col in which it's nested.

here is my grid code:

<div class="container-fluid">
    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        <h5  ng-app ng-controller="GetDate">
        {{date | date : 'dd.MM.yyyy'}}
        </h5>
      </div>
    </div>

    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        {{"Welcome "+ Name}}
        </div>
    </div>

    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        <button type="button" class=" btn btn-dark" data-toggle="modal" data-target="#modalMonthSelect">Launch Calculation</button>
      </div>
    </div>
    <div class="row">
      <div class="col-4"></div>
      <div class="col-4">
      <div class="table-responsive" >
      <div class="table table-striped table-bordered" >
        <thead>
          <tr>
            <th>Eitan</th>
            <th>Pozen</th>
            <th>Rebbi</th>
            <th>Cohen</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>500</td>
            <td>1000</td>
            <td>1500</td>
            <td>2000</td>
          </tr>
          <tr>
            <td>500</td>
            <td>1000</td>
            <td>1500</td>
            <td>2000</td>
          </tr>
        </tbody>
    </div>
  </div>
      </div>
      <div class="col-4"></div>

    </div>

</div>

And here is a screenshot:

As you can see - Although the table is nested inside a "col-4" it does not fill it . What should I do to make the table strech and fill the whole col?

kunal_tambekar kunal_tambekar · Accepted Answer · 2019-01-10T00:23:57

In your code the [div] tag with class "table table-striped table-border" needs to be [table]

<div class="table-responsive" >
    <table class="table table-striped table-bordered" >
        ...
    </table>
</div>

https://hackerthemes.com/bootstrap-cheatsheet/#table-responsive

Use above link for reference. I find it very handy.

Responsive-table does not fill the whole col in which it is nested

1 Answers