Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML - Enable Scrolling within a Table's Cell

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>
  • can I enable scrolling of this data within a cell....
  • if not than what is the solution.. I only have that 500 x 300 space
like image 225
Moon Avatar asked Aug 21 '10 13:08

Moon


People also ask

How do I make a table cell scrollable in HTML?

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.

How do I enable scrolling in HTML?

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.

How do I add a scroll in Tbody?

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).

How do I enable scrolling on a div?

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.


1 Answers

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>
like image 133
Pekka Avatar answered Nov 13 '22 01:11

Pekka