htmltwitter-bootstrapbootstrap-4twitter-bootstrap-4

Bootstrap 4 .table-responsive class won't take 100% width

I got 2 tables with same HTML and both declared as: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="card">
        <div class="card-body">
          <table class="table table-sm table-hover table-responsive">
              <thead>
                  <tr>
                      <th>Item 01</th>
                      <th>Item 02</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>Item 01</td>
                      <td>Item 02</td>
                  </tr>
              </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

And this is what I got on my screen:

Check this picture

The second and consecutive tables declared with the same HTML don't get 100% width on thead and tbody... What is wrong here?

UPDATE:

My first table was working because of the content of the last line, it was long enough to make it fit 100% on my card div.

Actually it's a issue on Bootstrap 4, so the -2 reputation on this question are invalid. Thanks.

Solution

  • Found out that it's a issue on Bootstrap V4, you can see in this issue, and my first table is not working, it's just the content of the last line that is long enough to fullfil the table width, so it looks like it works.

    EDIT: It got fixed by adding the class table-responsive as a parent div of the table, here is the ship list for the fix and the issue that reported the bug.

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="card">
        <div class="card-body">
          <div class="table-responsive">  
            <table class="table table-sm table-hover">
                <thead>
                    <tr>
                        <th>Item 01</th>
                        <th>Item 02</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Item 01</td>
                        <td>Item 02</td>
                    </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>