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%}
Related
I have been working on a new document recently that requires the regular use of the <table> function. To fit as many tables into as small and neat a place as possible, I have been using the <div> function. It works well with most browsers, though it regularly causes elements on the document to collide and conflict with each other which is frustrating.
Is there any way to keep tables fixed in their right places, or alternatively a way to set a specified shape for a browser window?
Here is an example of some of the code I have been using:
<div style="float:left">
<table>
<tr>
<th>...</th>
</tr>
</table>
</div>
When including multiple tables and divs, they begin to conflict with each other when the browser window size is changed, this causes, as easily imaginable, lots of aesthetic problems.
Make table wrapper div of fixed width and also for the table too.
The possible reason might be because of fixed div width and overflowing table.
You can check upto where the table extends by giving it border.
float left property affecting table also.
So give,
<div style="float:left">
<table sytle="clear:left;">
<tr>
<th>...</th>
</tr>
</table>
</div>
or else float left to table also
I have the following scenario, where I have a table that is to take up 100% height:
<table class="table1">
<tr>
<td class="fixed">
Fixed height row
</td>
</tr>
<tr>
<td>
<table class="table2">
<tr>
<td>
Content
</td>
</tr>
</table>
</td>
</tr>
</table>
Inside the table cell I have some other element that I want to fill the parent table cell height (100%).
This works in IE Quirks mode (which the original application was written against), as well as Chrome and Safari. I haven't checked other browsers.
However it doesn't seem to work in any version of IE in standards mode. It seems that the child element does not implicitly inherit the height of its parent table cell.
Is this an IE bug, and what is the best way to work around it?
Additional Information:
This scenario is widespread throughout an enormous legacy enterprise application that we are trying to make standards compliant. Therefore I'm looking for a solution that involves the least amount of changes possible to the markup.
Kindly make positioned... i.e parent and child position et to :relative and absolute respectively
This behaviour is evident in both IE and Firefox.
The latter being reported as a bug since 1999.
Give your table cells a height of 100%.
td{height:100%;}
See updated fiddle in IE http://jsfiddle.net/gqLUw/11/
I have a table displaying tabular data in a scalable layout. The table itself has a width:100%.
In one of the columns, user data on rare occasion will include long strings that stretch the table outside of its container.
My solution was to put the contents of that cell inside a div, and give the div a max-width:320px and an overflow:auto. This work in IE9 and FF7, the two browsers I'm concerned about.
<table style="width:100%;">
<tr>
<td>
<div style="max-width:320px; overflow:auto;">
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
</div>
</td>
</tr>
</table>
However, my preference is not to limit the column's contents to a max-width of 320px. I'd rather that the div stretches as needed with the table, and only overflows when the table no longer fits the screen. Is this possible?
What i have done for this before is set overflow to hidden and put the full string to a alt text so you can see it if you hover. I dont know if thats what your going for but its something i use sometimes.
If not that try looking at useing jquery ui hide effects thats a good looking way to do it. Hope that helps
Why not give the div a max width of 100% and place it around the entire table?
http://jsfiddle.net/wJUyL/
<div style="max-width:100%; overflow:auto;">
<table style="width:100%;">
<tr>
<td>
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
</td>
</tr>
</table>
</div>
I need to make some changes on a legacy web-based cms (which has table-based layout). I can only make changes to the content area of the website, which is inside several complex nested tables, but I suppose we can assume it is just 1 table here.
Given the (simplified) code below, is it possible to display ABC on the far right in IE6 and IE7?
<table>
<tr>
<td style="width:200px; border:solid 1px black;">
<!-- can only make changes inside here -->
<div style="border:solid 1px red; text-align:right;">ABC</div>
<input style="width:300px;" value="DEF">
</td>
</tr>
</table>
The <input> tag represents some content that may be longer than the preset width of the table cell. In IE8 or other modern browsers, the div can expand to match the input. But in IE6 and IE7, i cant seem to get it to expand beyond 200px using just css. I've tried using float, width, position relative, etc. Once again, I cannot remove the 200px width declaration or make any other changes to the table structure.
Anyone know how to do this? Thank you.
If you can change the structure inside the cell, you can wrap everything in a div that have float:left (or right, or is inline-block), so it would expand to the contents like this: http://jsfiddle.net/kizu/AkVqS/
If you can't wrap the input part, you can use the expression that run just one time (so it wouldn't cause any performance problems): http://jsfiddle.net/AkVqS/2/
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