Content in column is getting away from table

Hi,

thanks for your question, and sorry for the trouble.

Unfortunately, that link is only giving me a “Not found” error message. Is that really a published test page?

Regards,
Tobias

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

Hi,

thanks, now I can see the table. The problem here simply is that there are now spaces or line breaks in your “TIMINGS” column. Due to this, the browser treats this as one very long word.

You could maybe add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-9 .column-3 {
	word-break: break-word;
}

Regards,
Tobias

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;
}
}

Hi,

sorry, I don’t have a solution for that. Tables are not really a good tool on very small screens, due to their fixed structure.

Regards,
Tobias

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, 2 months ago by sreekanthdevireddy.

Hi,

I would recommend to do it like

.tablepress-id-9 .column-3,
.tablepress-id-10 .column-3,
.tablepress-id-11 .column-3,
.tablepress-id-12 .column-3 {
	word-break: break-word;
}

(with the correct IDs).

Regards,
Tobias