I need some help with rowspan in firefox. I need 1 big cell and 30 rows (7 cells per row) of smaller cells next to the big one. It works exactly as I want in Chrome, but FF stretchs all smaller cells to make whole table rectangle or square shaped.
Experiencing this issue at http://stinak.com/?s=1&u=1 (eg. Collections/ S/S 2012)
I would like to force FF to make these tables look same as in Chrome. It means align all rows on top even if there are less rows than is set in rowspan.
I don't know what specs have to say about this but Chrome's behaviour looks wrong. None of my other browsers (Opera, Firefox and Internet Explorer) render the table that way.
I think it'd be easier to get rid of the table:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
div.gallery{
width: 750px;
font-size: 0;
overflow: hidden;
}
div.gallery div.large{
float: left;
width: 400px;
}
div.gallery div.thumbs{
float: left;
width: 350px;
}
div.gallery div.thumbs div{
display: inline-block;
}
--></style>
</head>
<body>
<div class="gallery">
<div class="large"><img src="http://placehold.it/400x600"></div>
<div class="thumbs">
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
<div><a href="javascript:;"><img src="http://placehold.it/50x75"></a></div>
</div>
</div>
</body>
</html>
Accomplishing exact pixel layouts with tables can be a nightmare.
来源：https://stackoverflow.com/questions/7232337/firefox-rowspan-problem