I must create a table cell with a fixed height and width, but with a lot of content; something using overflow: auto
. The problem is that I can't use display: block
on a table cell (it kind of breaks the table layout) so I tried this:
height: 100px;
overflow: auto;
position: relative;
width: 1280px;
But it's not working. Here is my markup:
<tr>
<td colspan="3" style="width: 1280px; overflow:auto;">
{assign var="latime" value=$agenda|@count}
{assign var="latime" value=$latime*150}
<div style="width: 1280px; position: relative; overflow: auto; ">
<div style="width: {$latime}px; height: 100px; position:relative;">
{assign var="i" value=0}
{foreach from=$agenda item=ag}
{assign var="img" value=$agenda[$i][3]}
<img src="{$img}" id="imag{$i}" onclick='schimbaslidetoti({$i})' />
{assign var="i" value=$i+1}
{/foreach}
</div>
</div>
</td>
</tr>
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 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.
You can nest a block-level div with the overflow:scroll property set inside the table cell. ie
<td><div style="overflow:scroll;">Content</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