Question

我有一个html页面，<table>设置为100％X 100％http://oxide.co.il/test/table1.htm。我正在使用它，因为我需要页面全屏并适合所有类型的屏幕，页面也不应该滚动。

我希望表格保持原样（左边50％，右边50％，底部10％）但是当我在表格中添加内容时，表格会调整它的大小，这对我来说很糟糕

例如，当我添加一个大图像时，它看起来像这样：http://oxide.co.il/test/table2.htm（右侧较小，底部不见了）

我希望图片符合<td>的原始尺寸。当我为图片添加style="width:100%;"时，它仍然会破坏表：http://oxide.co.il/test/table3.htm（底部区域未显示）

当我在<div>中有一个很大的<td>时，它也会破坏表格： http://oxide.co.il/test/table4.htm（我知道<div>位于px，我无法将其更改为百分比）

如果不重新调整大小，我怎样才能使内容适合表格？

谢谢！

Answer 1

表格不适用于布局。正如你在问题的评论中所说，如果你只使用div，它会变得更加简单。以下代码执行您想要的操作，不使用表：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
        <style>
            html, body{
                margin: 0;
            }

            .container {
                bottom: 0;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

            .span50 {
                width: 50%;
            }

            .span100 {
                width: 100%;
            }

            .sheer90 {
                height: 90%;
            }

            .sheer10 {
                height: 10%;
            }

            .span50, .span100,
            .sheer90, .sheer10 {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="span100 sheer90">
                <div class="span50">
                    <img src="http://placehold.it/1200x1200" width="1200px" height="1200px" alt="" />
                </div>
                <div class="span50"></div>
            </div>
            <div class="span100 sheer10">
                Test
            </div>
        </div>
    </body>
</html>

使用百分比值声明的表内的内容会破坏表

1 个答案: