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

Question

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:

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.

You will need to post more code so we can see what other things could be affecting the table. — Ginger Squirrel, Nov 07 '17 at 13:59
Sup guys, just got back from lunch (and already got -2 on my question). Example that is not working for me: https://www.bootply.com/yQCAW8tiN0 There on bootply it works fine, but on my app it looks like this: http://prntscr.com/h7duxs Exatcly same code, I am gonna research more, got this question on stackoverflow about the same subject: https://stackoverflow.com/questions/41747667/bootstrap-4-responsive-tables-wont-take-up-100-width Also @Pete you don't need to answer like that, it may cause people to be afraid of asking, and asking is the main objective of this website. — cassmtnr, Nov 07 '17 at 15:51
Could you please point where is the unacceptance of my question @Pete? — cassmtnr, Nov 07 '17 at 16:13

cassmtnr · Accepted Answer · 2022-07-23T14:51:10.817

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>

Ok, you're right, I corrected it with the HTML snippet, you just need to be more polite with people ;) Thanks — cassmtnr, Nov 07 '17 at 16:27
@Pete, can you take a look at my question? It's been a year but I got revisited here because of positive votes. — cassmtnr, Nov 15 '18 at 11:02

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

1 Answers1