table-responsive class does not take full width

[davidism]

This was previously reported in #24256, which was closed after #24438 was merged. However, that merge was only documentation, and the issue doesn't actually appear to be fixed in Beta 2.

A table with the table-responsive class will not render at full width. I'm not sure why it works in the example in the docs, but this codepen demonstrates that the issue still persists.

<table class="table table-responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Developer</td>
      <td>None</td>
    </tr>
  </tbody>
</table>

The issue occurs on both Firefox 58 and Chrome 62.

[browner12]

simple solution, use a wrapping <div> with the table-responsive class.

<div class="table-responsive">
    <table class="table"></table>
</div>

[davidism]

OK, but why doesn't the documentation example need that?

[jipexu]

good question .... this is the display block in .table-responsive and yes the table not take full width...

[tmorehouse]

In the documentation examples, the reason it appears to "work" is that there is enough content in the table to force it to full width inside the container. Remove a few columns in the example table and you will see that it doesn't span full width.

[jipexu]

true

[matthewmalone]

+1 to get the documentation updated, please!

[FTWinston]

Is it definitely the intention that the table-responsive class not be put on a table any more?

Or is that just a workaround? Cos it seems a bit weird.

[shtse8]

It seems we should have to wait for the next release.

[tmorehouse]

One other caveat with placing table-responsive on the table element is for screen readers.

When a <table> has a CSS display of any value other than table, the table is no longer presented to screen readers as being a table structure, and requires placing an explicit role on each element within the table (i.e. table, rowgroup, row and gridcell)

[mdo]

Stylistically I've preferred the narrower tables on larger screens, and I've stated it's intentional. However, for the a11y reason alone, we'll fix this up.

[suraj3103]

simple solution, use a wrapping <div> with the table-responsive class.

<div class="table-responsive">
    <table class="table"></table>
</div>

THANKS MAN

[dsm-72]

@browner12 Nope not doing it for me. Any other ideas? Note that the div and the table when view with inspector are 100% but the thead and tbody are not

[suraj3103]

Thanks

…

On Fri, Jun 10, 2022 at 1:15 AM dsm-72 ***@***.***> wrote: @browner12 <https://github.com/browner12> Nope not doing it for me. Any other ideas? Note that the div and the table when view with inspector are 100% but the thead and tbody are not — Reply to this email directly, view it on GitHub <#24638 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AK52KCXDFVPVCHSX26B22LDVOJCUNANCNFSM4EB2VT7Q> . You are receiving this because you commented.Message ID: ***@***.***>

[kamleshwebtech]

simple solution, use a wrapping <div> with the table-responsive class.

<div class="table-responsive">
    <table class="table"></table>
</div>

This does not work if table-responsive div is inside a table's td. Any solution?? Please suggest me. Thanks.