I had a similar problem a while ago, on any smart device, tables does not show properly, I decided to stack each column for each row and it was way more user friendly. Not sure if this is what you require though, any large text contained in a column is wrapped automatically inside the column?
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
table.fixedHeader-floating {
display: none
}
.panel h2 {
font-size: 12px;
font-weight: 300;
}
.panel .myTablename thead, tbody, th, td, tr {
display: block;
}
.panel .myTablename thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.panel .myTablename tr {
border: 1px solid #ff6a00;
}
.panel .myTablename td {
border: none;
border-bottom: 1px solid #ff6a00;
position: relative;
padding-left: 1%;
}
.panel .myTablename td:before {
position: absolute;
top: 6px;
left: 6px;
width: 98%;
padding-right: 10px;
white-space: nowrap;
}
}