Table cell height longer than content by default in Firefox
Just so you know, I'm new to html and CSS and I'm sorry if the question is stupid, but I have a problem that seems simple, and yet I've been searching for a solution for hours and couldn't find any. There are many forums discussing similar issues but none of the solutions applied to my particular issue. I have simplified the page as much as I could to isolate the problem and this is what I got:
As you can see, Google Chrome and Safari keep the first cell 开发者_StackOverflowonly as high as its content, exactly as I want it to be displayed. Firefox, however, arbitrarily stretches the cell to a random and unnecessarily long height.
What I have tried with no success so far:
- Set the first cell height as "auto" (although I think this is already the default).
- Set the first cell height as 1px
- Set the "oi" td and/or tr height as "100%".
- Set the first cell to "display:block;", which gave me an even more intriguing result:
http://i.stack.imgur.com/KqBUB.png
How can I specify that I want the cell only as high as its contents? If "auto" doesn't do that, what does? None of the other possible "height" values seem to do the trick. Does anyone have any idea why this happens and how to fix this problem?
Here's my code:
<html>
<body>
<table border="1">
<tr>
<td>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
</td>
<td rowspan="2" style="width: 50%; text-align: center;">
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
</td>
<td rowspan="2">
right content
</td>
</tr>
<tr>
<td>
oi
</td>
</tr>
</table>
</body>
</html>
You need two things: 1. A doctype. 2. Set the Td's height to 1px, content will expand the cell.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table border="1">
<tr>
<td style="height: 1px;">
1st cell 1st cell<br/> <br/>
</td>
<td rowspan="2" style="width: 50%; text-align: center;">
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
LONG STUFF<br/>
blablablablaabl<br/>
blablablalablab<br/>
bkababakbakabka<br/>
</td>
<td rowspan="2">
right content
</td>
</tr>
<tr>
<td>
oi
</td>
</tr>
</table>
</body>
</html>
Of course, if you want to do this with REAL / VALID html + CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style type="text/css">
<!--
#column_left {
float: left;
width: 20%;
}
#column_middle {
float: left;
width: 60%;
}
#column_right {
float: left;
width: 20%;
}
.breaker {
clear: both;
}
.pad {
margin: 10px;
padding: 1px;
}
-->
</style>
<body>
<div id="container">
<div id="column_left">
<div class="pad">
<p>Left Column</p>
</div>
</div>
<div id="column_middle">
<div class="pad">
<p>Middle Content</p>
</div>
</div>
<div id="column_right">
<div class="pad">
<p>right content</p>
</div>
</div>
<div class="breaker"></div>
</div>
</body>
</html>
See how much cleaner that comes out? Put your styles in a stylesheet and this is reduced to VERY few lines of code for a basic layout.
It's kind of a hack, but a possible solution would be to set the height of the cell that's too long to 1, and then let the content push the height down.
<html>
<body>
<table border="1">
<tr>
<td height="1">
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
1st cell 1st cell<br/>
</td>
加载中,请稍侯......
精彩评论