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.
Related
I have a table that I would like to start on exact left and top of screen, but it looks like there is a 1 pixel space to the left and top of it. Not sure why.
I've tried margins, borders, etc all to 0, but can't get rid of the pixels.
<table style="width:100%;height:100%;max-width:750px;max-height:1334px;">
<tr style="height:5%;background-color:#e31837">
<td align="center"></td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr style="height:10%;background-color:#e31837">
<td align="center">
<table style="width:100%;color:white;font-size:26px;font-family:sans-serif">
<tr><td align="center"><p class="example"><b>TEXT</b></p></td>
</tr>
</table>
</td>
</tr>
</table>
I expect the table to start at the exact left and top of browser window area, but I can see the grey background 1 pixel left and top of the table.
It looks like I can't put the body style here but the style for that is all margins to 0 i.e. top, left, and the background color to grey... just to make sure it is part of the web page behind the table showing, not the browser adding some to the left and top for whatever reason.
This can be solved by setting border-collapse: collapse; on the table element. This prevents the browser from adding any additional padding between the borders of your table components (in this case, it was padding between the cell borders and the nonexistent table border), by merging borders for adjacent cells. You can see the difference visually in this diagram:
An alternate solution would be to set border-spacing: 0; on the table element. This will not combine borders from adjacent cells, but will still remove the padding between them:
(Originally posted as a comment to confirm it resolved the issue)
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 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'm using wicket and have a dynamic table. What I want to be able to do is have a fixed table border height that adds rows (max 5 per page), and it's row's width can grow dynamically so something like:
Column Headers
row1
row2
empty space
end of table
The only solution I can think of (Which probably isn't the best because I'm a novice at both wicket and html) is to have a div with a fixed height, and growable width. The div will provide the table's fixed boxed border, and the table itself will be inside this div, allowing it's rows to grow dynamically by wicket with a pageable view setting a max of 5 rows.
so far I have:
html:
<div class="tableCell">
<table border="1" BORDERCOLOR="#333">
<tr>
<th>SSA ID</th>
<th>Default Qualifier</th>
<th colspan="2">Property Name/Value</th>
<th>Description</th>
</tr>
<div wicket:id="SSAIDs">
<tr>
<td wicket:id="SSAID">test</td>
<td wicket:id="defaultQaulifier">test</td>
<td wicket:id="propertyName">test</td>
<td wicket:id="propertyValue">test</td>
<td class="width" wicket:id="description">test</td>
<td>Edit
 Delete
 View Roles
</td>
</tr>
</div><!-- end SSAID's div -->
and for CSS no matter what I try, I can get the height to be fixed but the width will always expand to the end of the page.. This div is currently inside of a container class..
If you don't know Wicket, that is fine.. I just need to know how to make the div that contains the table wrap its width, but have a fixed height.
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>