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
Related
So what is happening is that my table has expanded over my body, even though it is contained within it, I think screenshots is the best way to show this of when I have over the elements when I'm inspecting them (Chrome):
Body
tableData (wrapper for table)
Table
This is my code:
<body>
<main>
<div class="tableData">
<table>
"..."
</table>
</div>
</main>
</body>
I need my body to completely contain the table for styling purposes. How would be the best way to go about this? Is there a CSS overflow property I need to set?
The browser probably decides it cannot possibly fit your table within its container and instead lets it overflow. If that is the case, you could set overflow-x: auto on .tableData to add horizontal scrollbars to the wrapper, technically making the table fit inside the body.
You can of course always investigate why the table is so wide. It may be because of cell padding, white-space: nowrap somewhere or other things that forces it to be unnecessarily wide.
Another possible cause, which would explain why scrollbars won't appear on the wrapper, would be if the table has position: absolute (or fixed), taking it out of the normal layout flow.
I always seem to run into this same problem which I think is a bit of a gap in my CSS knowledge. I'm using bootstrap but any particular best method would be fine. I simply want to create something similar to this:
<table style="height:100%; width:100%">
<tr style="height:15%"><td></td></tr>
<tr style="height:70%; background-color:#EAB300; text-align:center;"><td>Main</td></tr>
<tr style="height:15%"><td></td></tr>
</table>
http://jsfiddle.net/c24hd/
But with divs rather than tables. It takes seconds to do with a table but when I replicate it with divs I run into the trouble of not being able to apply a percent based height to divs.
Any tips so I can stop running into this problem?
TIA
I would make a <div> and set the height to 100%. Then set the inner <div> margins to auto.
EDIT: Never mind that, the best is way is to display the div as a table and the inner div as a table cell then vertical-align it.
EDIT: One more, you can even use absolute positioning to center it on the screen.
Our application makes heavy use of tables for layout and positioning, and has in the past been IE (quirks-mode) only. Moving forward, we are trying to get out of quirks mode, and replace the tables with divs and a more semantic layout.
The one thing stopping us is a quirks mode "feature" which allowed us to set height=100% on a table row, and have the row take up the remaing vertical space. So far, we have not been able to find a way to do this outside of quirks mode, either with or without tables.
This is the code we are using in the body of the page. No styling shown here, but the effect is still the same:
<table width="100%" height="100%" border="0">
<tr>
<td>
<table width="100%" height="100%" border="1">
<tr>
<th>This is my header bar</th>
</tr>
</table>
</td>
</tr>
<tr height="100%">
<td>
<table width="100%" height="100%" border="1">
<tr>
<td>This is my main section bar</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="1">
<tr>
<td>This is my footer bar</th>
</tr>
</table>
</td>
</tr>
This is what it looks like in Quirks mode. Note that the middle row (with height="100%") has expanded to take up the remaining vertical space:
Standards mode renders the same code like this:
jsFiddle with the code: http://jsfiddle.net/RBeWN/3/ (Note that due to iFrames, etc. the code won't actually render in quirks mode on jsFiddle but you can force it by using Dev Tools).
I attempted to do this with divs and some css, but it doesn't work: http://jsfiddle.net/BVMhR/3/. Setting the main div to height: 100%; gives it the same height as its parent, rather than making it take the remaining space. Setting box-sizing: border-box; makes no difference to this either.
Could someone help me find a solution to this problem? I'd like to be able to do it without javascript if at all possible, but if Javascript is needed, it would have to be a generic solution that can run on every page so that there isn't too much development overhead for setting it up.
After playing around with quite a few different layouts, and clarifying a few specifics regarding the requirements, I have found a way to do this with pure CSS.
It does involve knowing the heights of both the top and bottom row (although they could be specified in %), and also does involve a few extra layers of divs.
My example can be found in this jsFiddle. Notice that when expanding / shrinking the window, the middle row re-sizes appropriately. It is also possible to make this one into a scrolling div if necessary (with overflow: auto) so that the content will scroll when it is too long.
Feel free to contact me with any extra questions about this layout if needed.
I don't think this can be solved with pure CSS.
http://jsfiddle.net/AZcZx/10/
This is how I would do it with javascript... I'm sortof assuming based on your names for the divs that this is how your pages handled header, content, footer and so this should be general enough for that.
I've added borders/margins to show that there is an edge case there, which jQuery helps nicely with... I also assume that the content vertical centering in your quirks-mode example is not part of the question.
EDIT:
I stand corrected. It can be done with CSS, though it creates a width issue that was not quite trivial to fix, so here's the fix for that:
http://jsfiddle.net/AZcZx/27/
Do you know the height of the header and the footer? Looking at your fiddle example with the divs, they both have a fixed height. If that is the case you could just absolutely position them to the top and bottom, and add a margin to the top and bottom of your #divMain.
You also need the html and body set to height: 100%; and the #divMain set to min-height: 100%;
You need to expand the body and HTML to 100% for this to work. "height:100%" makes an item 100% of its parent. Without a defined size of the parent, it will only be as large as its children.
body, html {height:100%}
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.
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.