I am trying to set up a scrolling table with a maximum height, and to do that I have:
<table>
<tbody style="height: 300px; overflow:auto;">
//php for loop, populating table with <tr>s/<td>s
</tbody>
</table>
This works fine, but if there is only one or two rows they are stretched to fit the 300px height. I switched height to max-height but then the scroll bars never appeared, no matter how large the table got. Where am I going wrong?
I don't know why the tr's and td's are filling the height up when there are few, but you could do a couple things I think.
Try styling the cells to be a certain height, or even don't style anything to a height, and style the div that the table is in to a height. I've done the latter, and it works for me. The cells all stay a normal height, depending on whats in them.
Related
I have a table that has the following requirements:
All columns must have variable widths
All columns must not take up more width than necessary
All cells must preserve white-spaces (white-space:pre/pre-wrap)
All cells must wrap when (and only when) exceeding maximum defined width (1000px)
I'm having trouble accomplishing rule #4.
As long as the whole width of the table fits on screen, there's no problem. However, when the available space is exceeded, the browser will do anything to make it fit by wrapping sooner than I intent. Also smaller columns will decrease in width and start to wrap.
CSS:
table {
width: auto;
}
table td {
max-width: 1000px !important;
white-space: pre-wrap;
word-break: break-word;
word-wrap: break-word;
}
HTML:
<table border="1">
<tr>
<td>Small text, should not wrap</td>
<td>Long text, should wrap at 1000px only; [...]</td>
</tr>
</table>
Please check this JSFiddle
I'm using white-space:pre-wrap, because the content must be able to wrap, even though the original data doesn't contain newlines. When I use white-space:pre, the column widths are exactly right, but obviously the content will overflow beyond the cell. I've tried to overcome this by adding overflow-wrap:break-word, but that didn't work..
Apparently there's no pure-CSS solution to this. In the meantime I've found a reliable work-around with a little bit of html and javascript.
I've put a <div> around the table, and gave it a width of number_of_columns * max_column_width, essentially the maximum width the table would have if all columns exceed the threshold.
This results in the table being rendered the way I intended, however this obviously causes a horizontal scrollbar reaching way beyond the rendered table. Therefore I need to reduce the width of the <div> to the actual width of the rendered table.
div.style.width = table.offsetWidth + 'px';
Not very elegant, but it does the job.
I have a table with two columns. I want the first column to be scrollable, so that my table can stay at a fixed height and not expand continuously. I only want it to be scrollable vertically though: Horizontally the overflowing parts should still be visible (In my case, the overflowing parts are on-hover tooltips which are getting hidden and add a horizontal scrollbar...), without having to scroll horizontally. My CSS/HTML looks like this:
<table class"tab1">
<td class="td1"><div class="container"><!-- Many, many, many floating elements here --></div></td>
<td></td>
</table>
CSS:
.tab1 {
table-layout: fixed;
width: 100% /*100% of the parent node*/
height: 20em;
}
.td1.container {
overflow-y: scroll;
}
2 Problems:
The height of 20em gets ignored. Even though the first column now gets a scrollbar, it still expands to its own needs.
When hovering over one of my elements, which generates a div with position:absolute, a horizontal scrollbar appears and the part of the tooltip that overflows gets hidden.
How can I fix this?
PS: The code is simplified of course, but I hope that it still illustrates my problem well.
PPS: Here is a JSFiddle: jsfiddle.net/pg0cLpjd
This question is even more difficult than I thought...
But here is a partial solution:
table-layout: fixed; only applies to the table itself and its columns; not the height. A table will always grow with its content. But there are a couple workarounds:
Set your table to display: block;, give it a specified height and set its overflow-y: scroll; (This also might solve your second problem, depending on your needs)
Place a div with a specified height around your table and set overflow-y: scroll;. The table still grows inside the div but you have a scrollbar.
Place a div in your columns with a specified height and set overflow-y: scroll;. This differs from the first attempt only in the position of the scrollbars and you can scroll every cell independently. But this has one huge disadvantage, which I am going to explain now:
As this answer says: If you set one overflow direction to something else than visible, the other overflow direction will automatically set to auto. (it's a feature, not a bug). And this is exactly where the second problem lies. Your code has the right logic, but it's just not possible. There are solutions using a wrapper div, (it didn't work for me) but you could give it a try.
I'd recommend having a look on how to make tooltips with JavaScript. There are plenty tutorials out there on the internet.
I wish to set a table to a fixed height and then for rows extending beyond the height, to show a scrollbar. If the rows do not extend beyond the height of the table i still wish to show a scrollbar but obviously its not scrollable.
I'm doing testing on IE7 and it only appears to like overflow:scroll, but when i test in Firefox no scroll is visible.
Does anybody know any code, including css-only-for-IE code which would solve this problem please?
You could include the data part of table in div
<table id="table-header">
<th>
..
</th>
</table>
<div id="table-scrollbar">
<table>
..
</table>
<table>
And then just set add css for the div (and possibly for the table, so cells have the same width)
#table-scrollbar { overflow: scroll; }
Sounds something like this, no? http://fixedheadertable.com/demo/fullwindowdemo.html
I have following html:
<table>
<tr>
<td class='tclone' id='clone'></td>
<td class='loader' id='loader'>
<div id='tdiv' style="height:630px; width:835px; overflow:auto;"></div>
</td>
</tr>
</table>
I open this HTML in a new window and JavaScript append contents to tclone and tdiv.
tdiv specifically loads a image. I needed to give the width and height parameters to
div as it was overflowing past the window, also overflow parameter allows scroll-bar inside td. This solution works with fixed size window -
but I want a mechanism, such that when user resizes the window the div also gets expanded
and the div scroll-bars are also adjusted to match the new window size.
any suggestions?
You need to specify the width and height in percentage then:
<div id='tdiv' style="height:30%; width:30%; overflow:auto;"></div>
You should adjust the percent values though.
On the table set "table-layout: fixed". Make sure the table and td widths are % based. You shouldn't need a width on the div.
If the content that overflows the div is not contained in another tag, you'll need a wrapper around tdiv.
An alternative to % widths would be setting the min-width and/or max-width attributes.
Please consider the following:
<td style="width: 500px;">
<div style="width: 400px;">SomeContent</div>
</td>
For some reason, the column that contains a div will not expand to 500px as the style suggests.
Do you know how to get the td to honor the width that I am specifying in the style?
In theory, you can use the min-width and max-width styles. In practice, some popular browsers ignore these styles. In this case you have explicitly declared a width of 400, so it should always equal 400 unless acted upon by a child growing or a parent shrinking. You could runat-"server" and programatically determine the width attribute based on content size, or you could play with the overflow style, or put it in a Panel with a horizontal scrollbar.
is there a width on the table and other tds within the table? Also, have you got a doc type going on?
However, that said, here's your solution:
<td style="width: 500px">
<div style="padding: 0 50px">SomeContent</div>
</td>
Setting your padding appropriately.
Having reread your question, I feel that this might not be the answer you're looking for. Could you elaborate a little more?
try this:
<td style="width:500px;">
<div style="width:100%;">SomeContent</div>
</td>
if however you want the td to be the exact size of the div, to a MAX of 500px, then try:
<td style="max-width:500px;">
<div style="width:100%;">SomeContent</div>
</td>
Keeping in mind that IE6 doesn't understand max-width, and will just force it to be 500px.
You have no reason to set a fixed width on the DIV within the TD, by default DIV's are block elements which means they will fill the full width of there containing element.
Either set padding on the TD or margin on the DIV to achieve the same style.
Without seeing futher markup or css i can't see any reason why the TD would not be 500px, if you added two different background colors to the elements you will indeed noticed that the TD will be 100px wider than the div.