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.
Related
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)
I have next html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html {height:100%;}body {height:100%;margin:0;}
h1 {form-size:20px;margin:0;padding:20px;}
</style>
</head>
<body>
<table style="width:100%;height:100%">
<tr>
<td>
<div style="background-color:#f00;">
<h1>This text should make height of this cell</h1>
</div>
</td>
</tr>
<tr style="height:100%;" id="row">
<td style="background-color:#c0c;">
<div style="height:100%;width:100%;background-color:#00f;color:#fff;">
This cell should take all unused space of table
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color:#0f0;">
<h1>This text should make height of<br> this cell</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
It works perfect in all browsers - except IE, where blue div inside middle cell takes space only for text.
May be someone know how to stretch it to whole free space inside table?
UPDATE: I Know that tables are bad in page-layout. if you can show me example of div layout which have top and bottom block with variable height and middle part which use all free space of browser window I will use it. I promise =)
Don't use tables for layout please,
Use Divs and CSS, It is considered a bad practice to use tables:
http://shouldiusetablesforlayout.com
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
Live Demo converted to DIV's
If you define a height for the body element then the blue cell does expand to fill the available space (JS FIddle demo). The problem is that an element of height: 100% takes up the full height of its parent, and for that to happen the browser has to know (be told) what the height of that parent element is.
You could achieve this with JavaScript (JS Fiddle Demo) (or any one of the various libraries, eg jQuery: JS Fiddle demo1), or by using:
table {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
JS Fiddle demo
I have no idea why using the jQuery version results in scrolling. I've tried removing padding, margin etc from the various elements (body and table), but it results in the same behaviour. Which is a tad weird, to me.
Using <div> should be something like this:
<div style="width:100%;height:100%;background-color:#00f;color:#fff;">
<div style="background-color:#f00;">
<h1>This text should make height of this cell</h1>
</div>
This cell should take all unused space of table
<div id="footer" style="background-color:#0f0; position:absolute; bottom:0px;width:100%;">
<h1>This text should make height of<br> this cell</h1>
</div>
</div>
The content in the center is not within a <div>, but in the main <div> itself. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="right" colspan="5">
<span class="validationInline">*</span>
<span class="hint">Required fields</span>
</td>
</tr>
<tr>
<td colspan="5" background="http://media.monster.com.hk/bgr_8.gif">
<img src="/static/cleardot.gif" height="1" width="1" />
</td>
</tr>
</table>
</body>
</html>
Can check it out here:
http://maishudi.com/tt2.html
I've known it's caused by DOCTYPE ,because deleting that part will make it normal:
http://maishudi.com/tt.html
So what's wrong?How can I make it work with the DOCTYPE ?
Note: this probably depends on the browser.
The size of block-level element (td, div, etc) if not specified will only be as big as needed, according to the space taken by its content. If specified, it will try to expand accordingly, except if the content is bigger, in which case it will expand as necessary.
In your example, the cell contains a single character (the non-breaking space), which take the size of single line. Hence, the block element must be at least 1 line-height high; it can't assume any smaller size. This is why your height declaration was ignored.
You may want to use this style:
line-height: 1px;
This sets the line-height to 1px. Line-height is not an element, so the above rule doesn't apply.
Add a style block with this rule
td img {display: block;}
and see Images, Tables, and Mysterious Gaps for a full explanation.
background isn't a standard attribute for TD elements is the reason. Instead use:
style="background: url(/path/to/image.png);"
As for your 1 pixel image, I assume this is simply to make the table cell appear? If so, that's not the advised way of doing it. You can either do:
table { empty-cells: show; }
in CSS although I don't think IE6 supports that. The more standards compliant way is to use a non breaking space:
<td> </td>
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.