Repository navigation
.table-responsive regression #24256
Description
After #23665 I see one problem. A table with table table-responsive class does not fit the screen width on a big screen. Previously the display:block was added only on small widths, now it applies always.
For your consideration if it's worth to change or it's as expected, but note it's a regression.
I'll be fine with any decision.
Activity
pat270 commentedon Oct 6, 2017
I think this bug appeared when
.table-responsivewas moved to thetableelement. The quickest fix is to go back to the way Bootstrap 3 did it and wrap the table in<div class="table-responsive"></div>.andresgalante commentedon Oct 7, 2017
Hey @alecpl Thanks a lot for reporting this.
Responsive tables are extremely hard to solve on a component level since there is no universal solution for them. It all depends on the data the user has to display. I like to call them the "holy grail" of components 😄. Having said that I don't see any usecase that can benefit from the docs introduced on #23665.
To me it generates unclear documentation and comments. Duplicates
width: 100%that's already defined on.tableand usesmax-widthmedia queries which aren't ideal on a mobile first framework.While reviewing this issue I also noticed 2 things: Our docs have a warning about
overflow-yfor.table-responsivethat doesn't exist on the code. And we are settingwidth: 100%; max-width: 100%;on.tablewhich can probably be justmin-width: 100%.@mdo @XhmikosR What do you guys think? If there is a really good reason to keep the
table-reponsive-*classes I am more than happy to clean it up and write better docs. Otherwise I'd just remove them and review tables docs and scss.XhmikosR commentedon Oct 10, 2017
@andresgalante: I'd say this is purely @mdo's choice. If it were up to me I'd keep
.table-responsiveand just fix the docs.mdo commentedon Oct 18, 2017
Yup, let's any docs inaccuracies or shortcomings. We can also call out
max-widthvsmin-widthnearly everywhere else.mdo commentedon Oct 19, 2017
PR at #24438 improves docs for this by including demos and better explaining how they work.