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>
Related
I'm going crazy, I have my website(http://piscagliacostruzioni.it/) divided by three frames(three rows), in the first one I have a table as menu, it uses around the 30 % of height of the screen.
In this table i put some images, the table is set to 100% to fit the frame and the image are set to fit the cell(only in height, i don't care about width) so what i was expecting was the image to fit in height without overflow, but the result is the image going out of the frame from the bottom and not being displayed.
Here is an example: https://jsfiddle.net/danipisca07/g0dpr0cL/
(I used a div to simulate the frame as parent)
<div style="height : 10%">
<table style="height: 100%; table-layout:fixed">
<tr height="65%">
<img src="http://piscagliacostruzioni.it/scrittariga.jpg" style="height:100%"/>
</tr>
<tr heigth="35%">
<img src="http://piscagliacostruzioni.it/Contatti/contatti.jpg" style="height:100%"/>
</tr>
</table>
Tried to set the table-layout to fixed and the image display property to block but everything was useless.
I hope you will help.
Thanks in advance
Bye
Did you mean something like this: https://jsfiddle.net/g0dpr0cL/2/
Your code is missing <td>
All parent elements (including html and body) needs a height.
html,body{
height:100%
}
Okay, I solved the problem(almost), instead of the first row of the table I used only the image and under it a table with only one row. To understand better see my website: piscagliacostuzioni.it, i've already uploaded the new solution.
Thanks again guys
I think your main issue is that you're missing the <td></td> elements from inside the <tr></tr> elements.
<tr>...</tr> is a table-row.
<td>...</td> is a table-data (the columns inside a row)
So having two rows will ALWAYS wrap the second image onto a second line - that's what the rows are for.
I'm not 100% sure if I understand the layout you're trying to achieve, but try the following code:
<div>
<table width="100%">
<tr>
<td>
<img src="http://piscagliacostruzioni.it/scrittariga.jpg" style="width:100%;"/>
</td>
<td>
<img src="http://piscagliacostruzioni.it/Contatti/contatti.jpg" style="width:100%;"/>
</td>
</tr>
</table>
</div>
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
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'm looking for a solution (preferably in css or html) to make it so that my table which is inside a div container to squish its <td>'s so that they stay inside the div container when the browser is resized. http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311/ex.html Notice how as you change the broswer size the contents of the cells change size but I want the size of the cells to be fixed and the columns change. So if the browser was small the table would be something like 2 columns rather than 6. Example html code:
<div id="imageline">
<table width="100%">
<tr>
<td>Stuff, maybe an image</td>
<td>Stuff, maybe an image</td>
<td>Stuff, maybe an image</td>
<td>Stuff, maybe an image</td>
<td>Stuff, maybe an image</td>
<td>Stuff, maybe an image</td>
</tr>
<tr>
<td>Stuff, maybe an image</td>
<td>Stuff, maybe an image</td>
<td>Stuff, maybe an image</td>
</tr>
</table>
</div>
Css code:
#imageline {
width: 100%;
position:relative;
}
I feel like this can be solved with simple css. I keep trying different combinations of where the width:100% goes but things don't work out. Any insight is very much appreciated.
Well, unfortunately it's not that simple. If you think about it, in your example you have 6 columns on one row, and then three on the other. You won't be able to just move the objects outside of the row because as you would expect, the table is designed to keep everything in the specified row(s).
So, the best way to go about that is to use DIV's with the float option.
Here is a brief example of what I'm talking about.
The best solution would be to put your content in divs, with each float: left; and specify the height and width of each. If you really must use a table, you will have to look into Media Queries in order to adjust your stylesheet based on the size of the users browser window. But this will be much more complicated.
I am trying to fix a display issue we are having with some tables (nested). In short, we show a page listing products. Each product is displayed in it's own table. And each of these is nested in a larger table to layout the page. Unfortunately, some of the inner tables have slightly more content than others and they end up being different sizes, causing others not to fill the containing cell.
For example:
<table style="height:500px; background:blue;">
<tr>
<td style="vertical-align: top">
<table style="background:red; height: 100%;">
<tr>
<td>hello</td>
</tr>
</table>
</td>
</tr>
</table>
In quirks mode, the red table, fills the blue table, so you basically see a red table, with a blue border.
In standards mode however, the inner table does not expand to fill the blue table. Causing the layout to be not at all as anticipated.
How can I fix this behavior? I don't want to render in quirks, as that will end up creating a maintenance nightmare.
Put style="height: 100%;" on the <td> and <tr> tags. Setting height to 100% needs every parent to have a defined height.
Instead of setting the height of the outer table, set the height of the <td> and style="height: 100%;" on the nested table.