weikelbob
asked on
CSS: How to get responsive tables to not be so spread out on desktop
Hello,
On this page
http://www.idiaper.com/Reliamed-Disposable-Premium-Washcloths_p_161.html
The responsive table is set to have a scrollbar on mobile.
It works and is responsive, but on desktop you can see that it is way too spread out.
Here's the HTML
Here's the CSS:
How do I change the CSS so that the table is still responsive, but is not so spread out on mobile. CSS changes only please if possible.
Thanks
On this page
http://www.idiaper.com/Reliamed-Disposable-Premium-Washcloths_p_161.html
The responsive table is set to have a scrollbar on mobile.
It works and is responsive, but on desktop you can see that it is way too spread out.
Here's the HTML
<div id="responsive-container">
<table class="table-s">
...
</table>
</div>
Here's the CSS:
.table-s {
min-width: 460px;
width: 100%;
display: table !important;
}
#responsive-container {
overflow-x: auto;
width: 100%;
}
How do I change the CSS so that the table is still responsive, but is not so spread out on mobile. CSS changes only please if possible.
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
@media (min-width: 460px){
means that all devices whose diplay as a width of at least 460px will apply following rules. In other words, all devices with a display larger tham 460px will apply to the table-s a width of 460px instead of 100%.If this is what you want, that's right.
ASKER
That's exactly what I want. Thank you.
ASKER
Let me know that I did OK and I'll close the question:
http://www.idiaper.com/prevail-bladder-control-pads
Open in new window