Question

有人可以告诉我为什么外部div没有扩展到页面宽度吗？如果没有删除doctype声明，是否有任何解决方案（如果我删除doctype，它正在扩展）？我的页面也处于js禁用模式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    </head>
    <body>
    <div style="border:1px solid #ff0000;">

        <div>
            <table class="storeList">
                <thead>
                    <tr>
                        <th>
                            Country Code
                        </th>
                        <th>
                            Store ID
                        </th>
                        <th>
                            Store Name
                        </th>
                        <th>
                            TownName
                        </th>
                        <th class="actions">
                            Store Operation
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            TEST
                        </td>
                        <td>
                            TEST
                        </td>
                        <td>
                            hghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjhghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjdhgfdhf
                        </td>
                        <td>
                            TEST
                        </td>
                        <td class="actions">
                            TEST ACTIONS
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</body>
</html>

Answer 1

这个答案有效，承诺！

到最外面的div（<div style="border:1px solid #ff0000;">），添加：

float: left，或;
display: inline-block。

如果您希望看到这两个修补程序的演示，请查看我提供的旧答案：

Answer 2

这可能是因为浏览器应用了自己的默认样式，包括各种元素的边距和填充。 body标签可能有默认填充，因此您需要在页面中添加“重置CSS”文件以重置这些默认值，或者只是尝试：

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
</style>

在页面的头部。另外，请注意，看起来您正在使用表格进行布局。在今天的现代CSS世界中，这是一个很大的禁忌：

http://www.hotdesign.com/seybold/

http://www.mardiros.net/css-layout.html

Why not use tables for layout in HTML?

Answer 3

您还可以将表格设置为100％宽度以覆盖div提供的区域

table { width: 100%; }

容器div宽度问题

3 个答案: