I need to place a scrollable div in a table cell. The table should be 100% height. The div has a lot of content that doesn't fit in the screen so scrolling should appear. But I want only the div to be scrollable, not the whole page.
If I don't use table, everything is perfect:
<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px; border-style: solid;">
<div>
Item 1<br/>
Item 2<br/>
...
Item 300<br/>
</div>
</div>
Div is scrollable, page has no scrollbar. But if it's wrapped in a table:
<table style="height: 100%">
<tr>
<td>
<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
border-style: solid;">
<div>
Item 1<br/>
Item 2<br/>
...
Item 300<br/>
</div>
</div>
</td>
</tr>
</table>
page becomes scrollable, and the div ceases to be such. What can I do?
Shouldn't be height: 100%; and overflow: auto; on <td> ?
I think your main problem is that you cannot expect the div to go to 100% height, because the table that is holding it also has a % as its width.
The container of the div must have an absolute height.
This is my code:
<table height="2000px">
<tr>
<td>
<div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
Item 1<br/>
Item 2<br/>
...<br/>
Item 300<br/>
</div>
</td>
</tr>
</table>
Which uses a scroll bar on the div and because of its height also makes the page scroll bar appear.
Unforunately unless you use some hacky CSS work around (Which might won't work in all browsers) you cannot tell a div to be 100% height without giving its container an absolute height as I have done above.
If I am wrong I'm sure someone will correct me, but I have tried to give divs 100% height to fit the browser window in the past without CSS or Javascript hacks and failed.
Tables actually use minimum height, so whenever your div gets bigger than what you want, the table column is actually just resizing to fit your div, and so your div percentage is rendered useless.
You need to use divs, not tables.
You should change table-layout css property to "fixed" value.
<table style="table-layout: fixed; width: 100%;">
<tr>
<td>
<div style="overflow: scroll;">
Scrollable div
</div>
</td>
</tr>
</table>
Related
Here's code:
<div class="row">
<div class="large-12 columns">
<table class="scroll wide">
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Forth</td>
</tr>
</table>
</div>
</div>
CSS
.wide { width: 100%; }
Here's fiddle:
https://jsfiddle.net/emilcieslar/zc37ydys/
As you can see, there are 4 columns and scroll class that makes the table scrollable whenever the width of the page is smaller than the table width. However if I want to make the table width 100%, it stays the same, it doesn't stretch. I can see that the table tag itself is stretched, but the insides doesn't stretch. This is caused by table being display: block, however it has to be display: block, otherwise it won't be scrollable (on horizontal axis). How can I achieve 100% width table while still being responsive?
As they say, think out of the box, so I thought out of the table box and wrapped the table inside a container:
<div class="horizontal-scroll">
<table class="my-table"><!-- without scroll class now -->
...
</table>
</div><!-- /horizontal-scroll -->
with CSS:
.horizontal-scroll {
overflow: hidden;
overflow-x: auto;
clear: both;
width: 100%;
}
.my-table {
min-width: rem-calc(640);
}
Incredibly simple solution, but took me a while to realise it. It's important to set min-width for the table as table width is by default flexible therefore it will never scroll if you don't set min-width. It will result in a shrank table to the point it's not possible to shrink anymore.
I am trying to build a table that contains a td which has a width set in percentage and when overflown a horizontal scrollbar.
Unfortunately I don't manage to make this happen.
http://jsfiddle.net/ne45s2wf/1/
HTML
<div class="container">
<table>
<tbody>
<tr>
<td>cell 1
</td>
<td>cell 2
</td>
<td class="too-long">cell 3 loooooooooooooooooooooooooooooooooooooooooooong
</td>
</tr>
</tbody>
</table>
</div>
CSS
.container {
position: relative;
max-width: 500px;
background-color: red;
}
table {
width: 100%;
}
td.too-long {
background-color: darkgreen;
display: inline-block;
width: 20%;
overflow-x: scroll;
}
First thing I wonder is what is the td-width in percentage relative to? And is it possible to set it to be relative to the table?
I would set a maximum width in percentage for the td with overflow hidden. While this works for the td, the parent containers do not align their width to the td child when its width is set with percentage. The parents width is as if the child did not have any width set. Furthermore the table now is not "responsive" any more.
I would take a look at bootstrap. I am not sure exactly what you mean but it seems like you are having trouble with your tables overflowing. Bootstrap has responsive tables which will scroll in the way you specify at small sizes. Take a look at this:
http://getbootstrap.com/css/#tables-responsive
I want to show two table in same line. Then I'm using float: left; Like this.
If those tables width more than the container I use overflow: hidden; to hide the surplus.
Overflow hidden working perfect but the table not stay at the same line.
http://jsfiddle.net/bULcB/3/
How can I fix that. I want the table stay at the same line.
Add a container div to wrap the two tables. And then make its width great enough to hold the two tables in a line. The overflow part of the container will not be shown as the parent div has specified overflow: hidden;.
See updated example on jsFiddle
Give position: relative to your parent element and give position: absolute; top: 0; left: 100px; to your second child element (remove float property from second child element).
Working Fiddle
or else
Give White-space: nowrap to your parent element and give display: inline-block to your child elements instead of float: left.
Works only in latest version of browsers.
Working Fiddle
div style="width: 300px; overflow: hidden; ">
<table cellspacing="0" cellpadding="0" style="float: left; background-color:red;">
<tr>
<td>First Table</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="float: left; background-color:yellow;">
<tr>
<td>Second Table</td>
</tr>
</table>
Is there a way to add a scroll bar to a 'td' tag?
I have a dynamic content inside a 'td' tag. I want the 'td' to be of fixed size and if the content becomes larger than the 'td' size, I want a scroll bar to appear only on that particular cell. Is there a way to achieve this?
Yes you can do that.
The easiest way is to put inside your cell a div filling it and set its overflow style property.
CSS :
div.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
HTML :
<td><div class=scrollable>
Some content with a scrollbar if it's too big for the cell
</div></td>
If you want the scrollbar to be always visible, even when the content isn't cropped, replace auto with scroll in the CSS.
Demonstration
<table width ="400" >
<tr>
<td >
<div style="width:100%; max-height:300px; overflow:auto">Your content here
</div>
</td>
</tr>
</table>
http://jsfiddle.net/7T2S4/1/
Hope this helps
You should need to provide either "height" Or "width" of div element, So that it would be scroll accordingly.
for example you want to apply Scroll Vertically(Y-axis):-
<td><div class="scrollable">
Some content with a scrollbar if it's not fit in your customized container
</div></td>
div.scrollable
{
width:100%;
height: 100px;
margin: 0;
padding: 0;
overflow-y: scroll
}
I have the following code:
<td style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</td>
This does not work at all. For some reason, the position:relative command isn't being read on the TD and the notice DIV is being placed outside of the content container at the bottom of my page. I have tried to put all the contents of the TD into a DIV such as:
<td>
<div style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</div>
</td>
However, this creates a new problem. Since the height of the contents of the table cell is variable, the notice DIV isn't always at the bottom of the cell. If a table cell stretches beyond the 60px marker, but none of the other cells do, then in the other cells, the notice DIV is at 60px down, instead of at the bottom.
This is because according to CSS 2.1, the effect of position: relative on table elements is undefined. Illustrative of this, position: relative has the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a div around your content and put the position: relative on that div instead of the td. The following illustrates the results you get with the position: relative (1) on a div good), (2) on a td(no good), and finally (3) on a div inside a td (good again).
<table>
<tr>
<td>
<div style="position:relative;">
<span style="position:absolute; left:150px;">
Absolute span
</span>
Relative div
</div>
</td>
</tr>
</table>
This trick also suitable, but in this case align properties (middle, bottom etc.) won't be working.
<td style="display: block; position: relative;">
</td>
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
With regards to your second attempt, did you try using vertical align ?
Either
<td valign="bottom">
or with css
vertical-align:bottom
also works if you do a "display: block;" on the td, destroying the td identity, but works!