I have a few <div> elements being displayed as a table (display:table). One div has an actual HTML table inside it with a min-width set. When I shrink the browser window, I would like the container div to “overflow:auto” and create a horizontal scroll bar just on the table element, but I would like the div to continue shrinking without a horizontal scroll bar (mobile-friendly).
Open the result window wide open and slowly shrink it’s width. When the window is small enough, the DIV works properly and the table is scroll-able within the DIV. After narrowing further, the sidebar menu drops below the content as expected. Although when the table reaches it’s min-width, the container DIV does not shrink with the window.
How can I fix this so the DIV shrinks with the main viewport window (so the table is scrollable from the overflow but the main browser window does not require scrolling?
That won’t work I’m afraid as the table-header-group on the parent changes the way that element will behave and the scrollbar will not be triggered as expected because content inside will be treated as cells.
You would need to wrap a div around .content and apply overflow to the new parent instead to get the effect you require.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.content {
display:table-header-group
}
.wrap {
overflow:auto;
border:1px solid red;
width:100%
}
</style>
</head>
<body>
<div class="wrap">
<div class='ontent'>
<div style="">
<table class="table table-bordered table-hover" style="min-width:600px;">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Promoation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. Example Item</td>
<td>In order for expenses to count as extraordinary, the occurrence must be truly abnormal and not reasonably expected to recur in the foreseeable future as is the case with a blizzard in Florida. Other examples of extraordinary expenses might include the seizure of assets by a foreign government (if, say, Company XYZ also operated resorts in France, and the French government suddenly seized the assets there) or dramatically adverse legislation (such as the outlawing of beach resorts by the American or French government). Often the company's financial statements will contain footnotes offering additional insight and detail on these expenses.</td>
<td>20% off all orders plus shipping</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Scrolling tables on small screens is not very nice anyway and I would do something like this.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.main {
display:table;
}
.content {
display:table-header-group
}
@media screen and (max-width:601px) {
table.mobile-optimised {
word-wrap:break-word;
min-width:0!important;
}
table.mobile-optimised thead {
display:none
}
table.mobile-optimised td {
display:block;
background:#f5f5f5;
padding:10px 5px;
}
table.mobile-optimised tbody, table.mobile-optimised tr {
display:block
}
.mobile-optimised td:before {
content:attr(data-th);
display:block;
font-weight:bold;
margin:0 0 2px;
color:#000;
}
.mobile-optimised tbody tr {
border-bottom:1px solid #00c0f3
}
}
</style>
</head>
<body>
<div class='container-fluid'>
<div class='row main'>
<div class='col-lg-3 col-md-3 col-sm-3 left-side'>
<div>
<div class="list-group" style="border:1px solid #9a9a9a;">Sidebar</div>
</div>
</div>
<div class='col-lg-9 col-md-9 col-sm-9 content'>
<div style="overflow:auto;border:1px solid red;width:100%">
<table class="table table-bordered table-hover mobile-optimised" style="min-width:600px;">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Promotion</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Item">1. Example Item</td>
<td data-th="Description">In order for expenses to count as extraordinary, the occurrence must be truly abnormal and not reasonably expected to recur in the foreseeable future as is the case with a blizzard in Florida. Other examples of extraordinary expenses might include the seizure of assets by a foreign government (if, say, Company XYZ also operated resorts in France, and the French government suddenly seized the assets there) or dramatically adverse legislation (such as the outlawing of beach resorts by the American or French government). Often the company's financial statements will contain footnotes offering additional insight and detail on these expenses.</td>
<td data-th="Promotion">20% off all orders plus shipping</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
The head information is duplicated in the data attribute of the td.
Then css adds it above the content at smaller screens so you can have a linear display.
Thanks for the detailed response and example code, I greatly appreciate it.
The only reason I used the CSS “table-header-group” is to make my left-hand sidebar drop below the main content on mobile devices - while keeping my navigation links first in the HTML source code for SEO benefits. Apparently this is impossible to do with Bootstrap without using table-header-group as a “trick”. Do you know of another way of accomplishing this?
I also really need your advice on non-scrolling tables based on your example… I have a site with around 100 pages. Each page has a table having 13 columns and sometimes over 100-200 rows (it just barely gets all of the information fitted to look nice even on a desktop screen). It’s a list of items where visitors can quickly browse through the table and find their item and row of information on the table. It would think it would take a long time for a mobile user to scroll vertically to find their item. Would you still recommend the non-scrolling table or simply a Bootstrap Responsive table with a scroll bar? I’ll send you a link if you’d like to look at it.
Flexbox can do it but support is only modern browsers.
You can still use the table-header trick but you need the extra div as in my example.
It all depends on the table but for very wide tables then I would probably put them in a div and scroll them horizontally on mobiles as well. I’ve used Roger’s method here a number of times to good effect.
Thanks for the code examples, those are very good and I appreciate the help.
Unfortunately, I can’t get the table-header trick working because it involves the sidebar, content and the table within the content - and trying to get the whole combination to work correctly.
If I just do it the “normal” Bootstrap way and leave my sidebar lower in the HTML source code, everything works great (the non-scrollable table works really nicely on my smaller tables, and Roger’s method looks awesome for larger tables!).
My major fear is Google is going to see my sidebar link menu lower in the source code now, and they’ll see these links as less important (like footer links). Google will likely see this as a major design change as well and there are literally tens of thousands of dollar at stake if the SEO gets thrown off. It’s a huge unknown and gamble…
Yes it may be a step too far in that bootstrap set up.
I’m not an SEO expert but I doubt that will be true.
From what I’ve gathered Google is most interested in content and that should be the most important part of your site. If links are then relevant to your content then they will rank higher. Most people are putting the links lower down the page and bringing content to the top.
Trying to second guess a search engine is a precarious occupation
I implemented your Mobile Optimized table example and it works great in Chrome and Firefox, although I noticed it’s not working in IE8 or IE9 (unfortunately, I don’t have IE10 or higher to test). Is there a way to get this table to work on at least IE8 and higher?
IE9 and under don’t change table-cell to block properly but if you float the element with a 100% width then that cures it.
You can give the code above to IE9 and under using conditional comments just in case it upsets anyone else but on testing the code doesn’t seem to have any adverse effects to other browsers.
