What is best CSS Code to use to make PowerCMS' Tables responsive??

Since PowerCMS has the insert table functionality, I have a lot of clients who use that to try and create their content placement - despite my objections and suggestions to it.

One main issue, is that it throws off the responsiveness of the site.

I am wondering what might be the best CSS code to use to allow the tables inserted via PowerCMS to be responsive? I have tried a couple things. Latest being:

@media screen and (max-width: 600px) {

table {
border: 0;
}

table thead {
display: none;
}

table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}

table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}

table td:last-child {
border-bottom: 0;
}

table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}



But nothing seems to do the trick...any suggestions??

Can I get a sample url with a table on it that was added by powerCMS? I'll play around with it there to see if I can figure out a good CSS trick.

Thanks so much - see the private message for details.

The real issue isn't the tables... it is the images inside the tables... and there is no real good solution I can think of since you don't know how many columns they might add.

I think to handle the tables you just add to your css:

table {
  max-width: 100%; 
}

But then you are going to have to add a media query and break point to really change the table at some size. Something like:

@media only screen and (max-width: 960px) {

table td {
 display: block; 
 text-align: center;
}
table td img{
 max-width: 100% !important;
 height: auto !important;
}

}

Those two combined should do the trick pretty well.

Thanks so much! I will give those a try

that did seem to work :) Thanks so much!