Consider a table with three rows with heights 10, *, 10. I'd like the middle cell to be high enough to fit to the page vertically. Unfortunately "height:100%" doesn't work at table, tr, or td level, possibly due to standards. Even if it happens to work, I don't want 100%, I want 100% of clientHeight-20px :) I can always write script to calculate remaining clientHeight but I wonder if it can be achieved in HTML/CSS standards.
NOTE: I'm using table just for layout, if there are other ways to lay them down in a better way I'm ok with those approaches too.
Try to leave table and use CSS.
This is the first link on google (searching: css page layout)
http://www.maxdesign.com.au/presentation/page_layouts/
You will spend more time at beginning, but then you will love CSS.
Regards,
Lorenzo.
I've tested the following in Firefox and Safari and it works although it's perhaps not the nicest solution! What you'll see is the 20 height on row1 and row3 is still applied and the 100% makes up the rest. If you leave off the padding and margin from the body you'll get scrolling.
<html>
<head>
<style>
html,body { height:100%; padding:0; margin:0; }
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="height:100%;">
<tr height="20" style="background-color:grey;">
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr height="20" style="background-color:grey;">
<td>row 3</td>
</tr>
</table>
</body>
</html>
Does this not work?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<!-- Date: 2009-07-13 -->
<style type="text/css" media="screen">
table {height: 100%; width: 100%;}
td {border: 1px solid #000;}
</style>
</head>
<body>
<table>
<tr height="10"><td>Data</td></tr>
<tr height="100%"><td>Data</td></tr>
<tr height="10"><td>Data</td></tr>
</table>
</body>
</html>
It does for me.
The "height: 100%" style will only work on elements that are inside an element that has the height property explicitly set. In your case, the table is likely to be inside the body tag and the body tag doesn't have a height set.
Have the same here - the simple examples above work, while my own page does not "stretch" the needed <tr> element.
What I found so far is that excluding the DOCTYPE (thus putting the browser into quirks rendering mode - even for FireFox!) makes my page behave like the simple examples, yet adding a DOCTYPE to these examples stops them from working.
I guess this is not really an answer yet, but it shows the direction in which to look further for the proper solution. Hopefully there is a way to achieve this "stretching" behaviour without the quirks mode.
EDIT: This answer worked for me. The table is wrapped into an absolutely positioned full-screen div. I guess what it does is the browser first calculates the div's dimensions, and then it knows how the table (and the tr inside it) should be sized. Works with DOCTYPE included, relieving, since I don't want to use the quirks rendering mode.
Related
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.
My SVG images work fine on all browser, except IE (surprise...).
Here is my test page: http://plnkr.co/edit/qmv9G3DGRlqDdi9ww58O?p=preview
As you can see, the first svg is displayed OK (even in IE), but the next two are not. They scale down to a container (table -> tr -> td in this case).
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
/* this will be applied to the images */
.smallicon {
width: 16px;
padding: 5px;
}
</style>
</head>
<body>
<p>
Problem exists in Internet Explorer only
<br> This is fine:
</p>
<object class="smallicon icon-white" data="http://konradpapala.beep.pl/test/040__file_delete.svg" type="image/svg+xml"></object>
<table>
<thead>
<tr>
<th>This is not OK, unless we add style = 'width:20px;height:20px' to the td tag, BTW "normal" images, like .png work fine</th>
<th>This doesn't work either:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class='smallicon' src='http://konradpapala.beep.pl/test/040__file_delete.svg'>
</td>
<td>
<object class='smallicon' data = 'http://konradpapala.beep.pl/test/040__file_delete.svg' type="image/svg+xml"></object>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Any ideas?
BTW, I know this question is already there and is answered ( SVG in img element proportions not respected in ie9 ), however, the solution simply doesn't work - I don't have width and height specified in my SVG files, while I do have a viewbox specified.
Unfortunately IE doesn't seem to handle the scaling of SVGs correctly when the size is unspecified. Other browsers default to a size of 300x150 when they can't otherwise determine what the intended size is. IE does not.
You therefore have to specify a width and height for your SVG. If not in the SVG itself, then in the <img> or <object> that references it.
I may be missing the obvious, but any hint on why is Chrome wrapping the last column in this table? Shouldn't it calculate the column width so that the content fits? (given that the table does not actually fill the page). Both IE and Firefox seem to render it fine (or at least the way I expect it to be rendered).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
margin: 0 8px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some more text</td>
<td><span class="imgLink"><img src="iconEdit.gif">Edit</span>
<span class="imgLink"><img src="iconDelete.gif">Delete</span></td>
</tr>
</table>
</body>
</html>
Edit:
The table is NOT filling the available page width.
Here's a screenshot showing the wrapping in Chrome:
I actually found a workaround for this -- just adding white-space: nowrap; to the last column of the table. Still, I believe that Chrome is not calculating the width properly, or perhaps I am missing something. I would like to know what is going on.
Just guessing here, but I believe that Chrome does make an error in calculating the width of the table cell. Since inline elements are not supposed to have margins, it calculates the width of the td without taking the margin into account. But then it draws the spans with the margins anyway, so the spans are to wide to fit in the td's calculated width, making them wrap.
So possible solutions are:
make the spans inline-block, since inline blocks can have margins normally and then the calculations will be fine
calculate what the eventual total width will be and give the td that width
remove the margin from the span and giving it to the imgs
don't use margins at all, but give the td some padding
Add display:inline-block to imgLink class: http://jsfiddle.net/surendraVsingh/MFZX2/4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
margin: 0 8px;
display:inline-block;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some more text</td>
<td><span class="imgLink"><img src="https://dl.dropbox.com/u/19982181/a.png">Edit</span>
<span class="imgLink"><img src="https://dl.dropbox.com/u/19982181/a.png">Delete</span></td>
</tr>
</table>
</body>
</html>
Another answer figured by Grodriguez is applying white-space: nowrap to last column.
To add to SVS's answer the reason for this I suspect is that span is an inline element and as such is not allowed to have a margin. I would imagine that chrome is saying "well, if you want a margin on this you must want it to be a block element" and thus making it a block element. And being a block element now it won't sit the two spans side by side and so does a line break.
This is pretty much confirmed by the fact that setting the display to inline-block works as does removing the margin property from the styles.
Here is an example:
<table>
<tr>
<td width="400px" id='myTD'></td>
</td>
</table>
here is the external code:
protected string GetHtml()
{
return "<table><tr><td width="800px"></td></tr></table>";
}
Since the width of 'myTD' is smaller than the width of the external code the displayed code is getting out of the main table boundaries , I dont want the innerHTML of 'myTD' to make the main table wider.
Suffice to say that as the external HTML code is given from outside I can't change it without ruin it as I'll never know which width or heights will be essential for the code and which wouldn't.
This wasn't easy in a way that's compatible with all browsers, but I did come up with this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#myID {width:400px; overflow:scroll}
</style>
</head>
<body>
<table>
<tr>
<td><div id='myID'>
<table><tr><td width="800"><hr style="width:792px"</td></tr></table>
</div></td>
</tr>
</table>
</body>
</html>
(or as a jsFiddle). That is, by adding a new element inside your td that gets the scrollbars. Trying to apply overflow:scroll to a table cell doesn't work the same on all browsers.
Hope you can use this.
Here's a piece of code to illustrates my problem:
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
table {border-collapse:collapse;}
</style>
</head>
<body>
<table width='100%' height='100%'>
<tr>
<td>
header
</td>
</tr>
<tr>
<td valign='top' height='100%'>
<table width='100%' height='100%' bgcolor='red'>
<tr>
<td>test</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Page that I'm currently building has a header and a table below it, table must take all the vertical space available but must not exceed the screen height. Code above works fine in FF/Chrome/Safari but in IE nested table does exceeds the screen height exactly by the height of header above thus causing vertical scrollbar which is an undesired behavior.
How can this be fixed?
IE is not good about calculating heights in tables. In this case, it's setting the cell height to 100% of the body and html rather than its parent container.
Easiest thing to do, but also an ugly hack, is to put
<!–- For Internet Explorer -–> on a line above <!DOCTYPE HTML>
This will force IE into quirksmode and should render properly for your case. You may have to restart IE rather than simply refresh the page after adding the comment.
Change
html, body {height:100%;margin:0;padding:0;}
to
html, body {height:100%;margin:0;padding:0; overflow-y: hidden;}
It will remove the vertical scroll-bar from the IE (or any web browser)