Hi,
thanks! That helped a lot! It looks like one of your developers added this feature to some TablePress files. To again remove it, please edit the file
/wp-content/plugins/tablepress/js/jquery.datatables.min.js
on your server and remove the code fragment
(function () {
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");
for(var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent.replace(/\r?\n|\r/,""));
}
}
if (headers.length > 0) {
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}
}
}
}
} ());
from the end of the file.
In addition, please edit the file
/wp-content/tablepress-combined.min.css
and remove the code fragment
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block; text-align:center;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
Finally, please go to the “Plugin Options” screen of TablePress and remove the code
@media screen and (max-width:768px) {
.tablepress th,
.tablepress td {
font-size: 10px;
}
}
from the “Custom CSS” text field.
After that, this one-column effect should be turned off again. You might then want to explore one of the other possibilities for a responsive tables, via the Extension from my link above (it is already installed, you will just have to adjust the Shortcode that you are using on that page).
Regards,
Tobias
