I am facing an issue similar to the one discussed in this thread about responsive design for html wide table. In essence, my problem involves a table that is wider than the container div, which has ten columns in width (using bootstrap). The challenge arises when the table content exceeds the width of the container, causing the body of the table to get truncated. As a result, when I scroll horizontally, only the header of the table is visible while the body remains empty.
$('table').on('scroll', function () {
$("table > *").width($("table").width() + $("table").scrollLeft());
});.ten.columns {
width: 82.6666666667%;
}
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
}
/* Other CSS styles for the table */
/* ... */
<div class='row ten columns offset-by-one'>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
// Rest of the table content...
</tr>
</thead>
<tbody>
// Table rows...
</tbody>
</table>
</div>