Let's say I have a table cell with fixed width and height.... and I have data that exceeds the cell's fixed dimensions...
<td width="500" height="300">lots of data that exceeds the dimensions</td>
The easiest way is to put inside your cell a div filling it and set its overflow style property. If you want the scrollbar to be always visible, even when the content isn't cropped, replace auto with scroll in the CSS.
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
If you want tbody to show a scrollbar, set its display: block; . Set display: table; for the tr so that it keeps the behavior of a table. To evenly spread the cells, use table-layout: fixed; . Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar).
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
The easiest thing would be to add a 500 x 300 div and give it overflow: auto
<td width="500" height="300">
<div style="width: 500px; height: 300px; overflow: auto">
lots of data that exceeds the dimensions
</div>
</td>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With