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
Related
So, I have a unique case where I'm using xslt to generate many (~50-100) div elements depending on the day from an xml like this:
<div class="allApps" >
Content here
</div>
<div class="allApps" >
Content Here also
</div>
...
I currently have them formatted into rounded boxes stacked vertically. How can I use css to position them into a "tabular" format, like fitting 5 in a row?
Alternatively, they were initially <li> instead of <div>. How could I implement tables with <li>?
The reason I'm doing this is to reduce the amount of scrolling required to get to the bottom of the elements.
Thanks!
If you goal is to reduce the vertical scroll then try to make some of them as
display:inline-block
You could make them all inline-block and then insert breaks every so often (like every 5th one). Or, if you want some great responsive options you could use Bootstrap.
If you are really set on using a table then li's have nothing to do with it. Li elements are for a list, not a table. Cells in a table use td like
<table>
<tr>
<td></td>
</tr>
</table>
But honestly, the easiest thing is probably to just switch to css display:inline-block.
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 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/