IE8 stretching table cell height - html
I have a page layout that is based on tables, and as much as I would like to restructure it with more modern markup, that is not an option. The layout uses a cell that spans two rows as a sidebar on the right side, while the upper left cell contains a simple header, and the lower left cell contains the main content of the page. The top left cell has a fixed height, and the height of the bottom cell and right cell is not specified. I have created a simplified example that illustrates my problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.fixed { height: 100px; }
table { border: 1px solid #000; }
td { border: 1px solid #ddd; vertical-align: top; }
tr { border: 1px solid #cfc; }
* { padding: 15px; }
</style>
</head>
<body>
<table>
<tr class="fixed">
<td>left</td><td rowspan="2"><div style="height: 500px;">right</div></td>
</tr>
<tr class="stretch">
<td>left</td>
</tr>
<tr class="footer">
<td colspan="2">footer</td>
</tr>
</table>
</body>
</html>
I have set the height of the right column inline at 500px to simulate content that is taller than the height of the two left columns. This behaves as expected in modern browsers: The height of the top left cell remains fixed, and the lower cell stretches to fill the extra space. But in IE8, both left cells are stretched vertically. I need the top cell to keep its fixed height. How do I get IE8 to honor the height specified for the top left cell using only CSS?
Edit:
Instead of setting the height on the right column td, I am setting the height on a div inside the right column.
I think Jeroen is right that there are no pure CSS solutions to this problem. Any time there are cells in a table with rowspan set, IE is going to ignore any explicit heights set on those rows. The solution is to never use rowspan. In my situation I was able to circumvent the problem by placing the content that was spanning two rows in the second row, leaving the cell in the first row empty, and using a negative margin to move the start of the content up into the first row. I hope this is helpful to somebody else. If anybody does have a pure CSS solution I'll accept that as the answer.
Interesting problem. Afraid the answer may be that there are no real solutions to the problem you describe, only workarounds. I found that adding some style to the second "left" td made the problem disappear, at least in your sample:
<td style="min-height: 500px;">left</td>
Hope that helps.
PS. IE9 had the same problem.
Even if a cell only contains an image, you must know that table cells have their height computed according to the position of the text baseline; and the current style of text has an impact on computing this baseline position and the line-spacing after it.
You may think that setting "line-height:1" would be enough to avoid this line-spacing, i.e. the margin gap that always occurs below every line of text. This is not enough. The simplest solution is to set "line-height:0.8" (or lower) for the cell containing the image, so that the 0.2em default added gap below the baseline (which is still infered as default due to the absence of text) will make the baseline fit in the cell height. Then you can properly place an image (or any fixed height element) in the cell whose height will determine the cell height, without having the cell height stretched.
Note: with this line-height, any text you would place in that cell would have its baseline just at the bottom of the cell, so that descenders will overlap the bottom padding, border, border-spacing of the current cell, or in the border, padding or content of the cell in the next row, or contents below the table if the cell was on the last row.
Tested on Google Chrome (current version 15)
Example (HTML5):
<!DOCTYPE html>
<html><head>
<title>Examples of image transforms (rotations and mirroring)</title>
<style>
table,tbody,tr,td,image{margin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;}
td.z{line-height:0;}
</style>
</head><body>
<table border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td style="border-bottom:hidden">Normal 0° (1,0,0,1,0,0)</td>
<td style="border-bottom:hidden">Mirrored 0° (-1,0,0,1,0,0)</td>
<td style="border-bottom:hidden">Mirrored 90° (0,1,1,0,0,0)</td>
<td style="border-bottom:hidden">Normal −90° (0,1,-1,0,0,0)</td>
</tr><tr>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td>
</tr><tr>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,-1,0,0,0);"/></td>
</tr><tr>
<td style="border-top:hidden">Mirrored 180° (1,0,0,-1,0,0)</td>
<td style="border-top:hidden">Normal 180° (-1,0,0,-1,0,0)</td>
<td style="border-top:hidden">Normal 90° (0,-1,1,0,0,0)</td>
<td style="border-top:hidden">Mirrored −90° (0,-1,-1,0,0,0)</td>
</tr></tbody>
</table>
</body></html>
Note the trick on class "z" for table cells (line-height:0) containing only an image, in order to make them fit exactly the image size.
The images shown in this example is a small square photo in 8 different orientations. There's only a thin 1px gray border enclosing each photo and its label displayed above or below, the photos are fitting exactly within the cell borders.
Note that the reorientation uses WebKit styles (for Safari and Chrome); you can add the equivalent properties for IE and Firefox by changing the prefix; for CSS3, no prefix will be needed. If not these transforms are not supported, the images will not be reoriented/mirrored, but they will still fit exactly the cell, without extra internal gaps.
Related
How to resize image to row height, while displaying inline with centered text?
I need to display a table like this, but have the rows all be the same height even though the images in the table have varying sizes. The table needs to be responsive, so that everything resizes as the window size is changed. The current code for each row is this: <tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF"> <td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td> <td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center"># <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td> <td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td> </tr> And the full code is here. The problem with this is that the row sizes vary depending on the size of the logo. You can see that the logo for the Pirates is larger than the logo for the Cardinals, so the row height is taller for the Pirates. I have succeeded in resizing the logo to be the same height as the row, based on this answer. This involved positioning the logo absolutely, though. The code for this is here (see the 7th row where I made the change). The problem with this approach is then that I can't figure out how to display the text (the # symbol and the team name) together inline with the team logo. Obviously I can't use display inline block because I've positioned the logo absolutely. So, my question is: how can I resize the team logo to be the height of the row while also displaying the logo inline with the text (centered)?
Scrap the abspos approach. For the all the img logos, remove width='15%' attribute. Add a vh height property that changes with the height of the window, e.g. <tr> ... <img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td> ... </tr> <tr> ... <img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td> ... </tr>
Outlook 2007 completely ignores width and height for elements in table cell
I’m going through the horror of trying to make HTML e-mail templates that look acceptable in Outlook, and quickly nearing the point of hara-kiri.
I have a basic table setup: three columns, with all content in the middle one. The columns on the side are just there to give spacing. The table has a width of 100% so it takes up the entire width of the reading window. So essentially this (with all the Outlook-specific crud left out):
<table>
<tbody>
<tr>
<td class="leftsidespacer"></td>
<td class="maincontent">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer"></td>
</tr>
</tbody>
</table>
In any normal e-mail client, this is a piece of cake. You set a width on the middle column and that’s pretty much it. Outlook 2007 (and probably other versions) instead collapses all three columns so the middle column takes up 100% of the body width. Basically, setting a width on a table cell has no effect.
All right, so I fall back on really old-time ways of adding an image in the empty cells to force them to have some width. Ugly and stupid, but at least it sorta-kinda works.
The problem I’m facing now, which I mysteriously cannot find anyone even mentioning online, is that any element that I put inside a td always ends up being 100% of the width of the cell and the height of the content, no matter what I do.
The div with the class thisisabox in the example above, for example, always ends up being just one line of text in height and 100% of the table cell, even if I define it thus:
<div width="200" height="200"
style="display: block;
width: 200px;
height: 200px;
background: red;">
Everything in me screams that this should produce a 200 × 200 pixel red box, but it doesn’t. It just gets ignored completely.
As far as I can tell, there is nothing in my styles which ought to have any influence on this. The entirety of the styles declarations I have for the bits in the HTML snippet above is this:
table {
width: 100%;
margin: 0;
padding: 0;
}
table, tr, td {
border-collapse: collapse;
}
td {
padding: 35px 0;
border: 0;
}
(It gets inlined and HTML-attributified by the Premailer API before sending, so it’s not because the styles are only declared in the head.)
Is there some way of making Outlook notice specified width and height of elements inside a table cell?
Or am I missing something really obvious that’s making Outlook behave in this infuriating way?
Outlook does not work with div and it in some instances ignores padding. https://www.campaignmonitor.com/css/box-model/padding/ The way to fix this is simple and it will work with every email client: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> </head> <body> <table width="200" height="200" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="leftsidespacer" width="30"></td> <td class="maincontent" width="140"> <p>All the content here</p> <div class="thisisabox"> <p>Something here too</p> </div> </td> <td class="rightsidespacer" width="30"></td> </tr> </tbody> </table> </body> </html> I would create a style sheet and add the values which will be picked up by most modern email clients, but Outlook desktop versions like 2007-2016 require a few inline aids to function properly. Edit: Base table in Outlook 2007 This is the base table in Outlook 2007 with no extra css that I posted above: This image came out of Litmus. I only used the code I posted above. If you are not seeing this, something in your CSS or HTML is causing an issue. Good luck.
Here is something you can try. Code: <table cellpadding="0" cellspacing="0" width="200" height="200" bgcolor="#000000"> <tbody> <tr> <td height="200"></td> <td valign="top" style="color:#ffffff;"> All content here </td> </tr> </table> Result in Outlook version 1803 (tested: 20/04/2018) What I have done is added a height to the table element as well as one of the cells. You can either populate the left column with a spacer image or keep it as it is. Note: You can make do without the left column if you wish but do add the height Hope this is the answer you were looking for.
How do you adjust table cell size?
I want to change the size of my table cell to be smaller in height. The first cell has an image of 300px width. I'd like the second cell to have a height of 100px. I've tried html solutions like <td height="10"> but that hasn't worked. What I'm looking to do is have an image on the left and a text block on the right. <table> <tr> <td> <img id="plattOverlook" src="images/Scenic/plattOverlook.jpg"/> </td> <td style="background: white"> This is an overlook. </td> </tr> </table>
In a simple table adjacent table data cells will always be the same height unless you use rowspan=* Have a look at this page (about half way down) - http://www.htmlcodetutorial.com/tables/_TD_COLSPAN.html You will have to use rowspan for the image. Other wise I don't think there's any possible solution
Use rowspan. Check this fiddle: http://jsfiddle.net/10z7ya28/
td {
width: 100px;
height: 50px;
}
Table cell sizing in Chrome and IE
I have a HTML table Required details are mentioned in JSFiddle. This is working well on Firefox, but it's not on Chrome and IE! what's wrong with them? why they expand the cell in the last row which has a fixed height, instead of second row which is the only cell with not-determined height in first column. Here is the HTML code: <table style="width: 100%;" dir="rtl" cellpadding="0" cellspacing="0"> <tr> <td style="height: 100px; width: 176px; background:blue"> this is a fixed size cell </td> <td rowspan="3" style="background:gray; height: 360px;">this cell is spanned 3 rows<br /> lots of content may be placed here</td> </tr> <tr> <td style="background:red">this should expand depending on gray region</td> </tr> <tr> <td style="height: 46px; background:blue">this is a fixed size cell</td> </tr>
seems like height algorithm for your case is underfind. You want td {height: auto} to extend all available space, but
A 'height' value of 'auto' for a 'table-row' means the row height used
for layout is MIN. MIN depends on cell box heights and cell box
alignment....In CSS 2.1, the height of a cell box is the minimum height required by the content
and finaly
CSS 2.1 does not specify how cells that span more than one row affect
row height calculations except that the sum of the row heights
involved must be great enough to encompass the cell spanning the rows.
see 17.5.3 Table height algorithms
How to line up a table's th cells to be in the middle (on the border) of the td cells below it
I'm trying to create this table layout. Basically the orange 18 you see in the grid means 18% usage between 11am and 12pm on Tuesday. So that's why the hours along the top are best on the edges of the table cell, not in the middle of the cell. That way it's showing the data representing usage over a one hour time range. I have basically applied a basic hack and right aligned the hours along the top so they kinda look like they're inbetween the cells. This isn't perfect as you can see. What I want to do is actually have the hours along the top centered nicely between the data cells. I think I could do it with a fixed size column widths, but the table needs to stretch to 100% of the page width and the column widths a percentage. Then it's scalable down to a smaller browser. Is there a way to do this in HTML and CSS?
To have the first row truly centered between the bottom cells with a single table you can use colspan + widths in percentages without using positioning. That way it will be fluid, it will work with any font, and it won't get screwed when you use 2 digit numbers.
HTML:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<td> </td>
</tr>
<tr>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
CSS:
table {
text-align: center;
width: 70%;
}
table td {
width:8.33%; // 100% divided by (double the number of bottom cells)
}
table th {
width:16.66%; // 200% divided by (double the number of bottom cells)
}
table td[colspan="2"] {
background:yellow;
}
table td,
table th {
outline:1px solid tan;
}
Demo: http://jsfiddle.net/G7KZe/
You could use position: relative; to place your month numbers to be where you want but it's tricky because table cells often behave weirdly with CSS positioning. And the exact positioning can depend on the font used.
I've come up with a solution that requires 2 tables. The idea is to have one table for the headings, one table for the content. The trick is to have 1 cell less in the headings.
Live example: http://jsfiddle.net/w6TnE/
As you can see, the month numbers are perfectly aligned with the borders. But keep in mind that this setup requires a fixed width, in this case, 60px:
td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}
I just added some additional styling to make it clear.
You can use an absolutely positioned element inside a relatively positioned element to get the effect you want. The idea is to style the <th> elements with position: relative and then style the hour numbers themselves in an element with position: absolute. You can then position the numbers anywhere you want in relation to the cell. Here is an example jsfiddle. To adjust the position of the numbers you may want to use a pixel value instead of a percentage for the right property in the th > span block. For more information, you might want to read about the different positioning methods.
table td{ text-align:center;}
This will align the text of each cell to the center.
You could always wrap each of the table heading text in like a <div> tag and use the css position:relative and left:2px or whatever number of pixels to make it look good. example <table> <tr> <th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th> </tr> </table>