Firefox rowspan problem

前端未结

关注

 1  820

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 stre

相关标签:

1条回答

温柔的废话

2021-01-25 19:49

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.

0 讨论(0)