Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

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

<div id="responsive-container">
 <table class="table-s">
...
</table>
</div>

Open in new window


Here's the CSS:

.table-s {
  min-width: 460px;
  width: 100%;
  display: table !important;
}
#responsive-container {
  overflow-x: auto;
  width: 100%;
}

Open in new window


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
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of weikelbob

ASKER

took out 2 .table-s references and made the change.

Let me know that I did OK and I'll close the question:

http://www.idiaper.com/prevail-bladder-control-pads

.table-s {
  min-width: 460px;
  width: 100%;
  display: table !important;
}
#responsive-container {
  overflow-x: auto;
  width: 100%;
}
@media (min-width: 460px){
    .table-s {
         min-width: 460px;
         width: 460px; //or the value you prefer here
         /*you can also apply other rules like margin and borders or background accordingly to your taste and design*/
    }
}

Open in new window

@media (min-width: 460px){

Open in new window

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.
That's exactly what I want. Thank you.