sreekanthdevireddy
Forum Replies Created
-
Hey Tobias, i had a lot of tables in my site at Pushpakbustimings,
.tablepress-id-9 .column-3 { word-break: break-word; }
and i want above code to apply to all my tables, what should i do now.
- This reply was modified 5 years, 6 months ago by sreekanthdevireddy.
Hey thank for your code and it works but in lowest screen resolution table is not much effective, i want it to be more responsive even at 240* 320
this is javascript im using
<script>
(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]);
}
}
}
}
} ());
</script>this is css im using
@media screen and (max-width: 600px) {
table {width:100%;}
table {word-break: normal;}
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;
}
}sorry my bad i had published this post as private and now i had made it public can you please check again and by the way i had installed custom js and CSS wp plugin and i had pasted custom js and custom CSS in that plugin fro responsiveness which was given by a friend