Question

我一直在使用一个html页面，页面底部有一个表单。该表单位于表格内，表格位于div内部。在这里小提琴：http://jsfiddle.net/2ZTvQ/

问题是在较小的屏幕上，div占据100％宽度（屏幕的整个宽度），但不是包含表格的整个表格的宽度。我不是html / css的专家，所以我甚至不确定是否可以这样做。

示例HTML：

<div class='wide'>
    <table width="100%">
        <tr>
            <td>
                looooooooooooooo ooooooooooo00000  ooooooong text goes here
            </td>
        </tr>
    </table>
</div>

CSS：

.wide {
    text-align:center;
    background:#e7e7e4;
    width: 100%;
    padding-top:20px;
}

Answer 1

删除text-align:center;或为表格创建新的对齐样式。

Answer 2

我认为你必须做的是在手动尝试减小它的宽度之后，将最小宽度添加到.wide。因此，一旦它小到可以得到它（使用媒体查询来改变某个窗口宽度下的类）设置

.wide { min-width: thatSize; }

现在会发生什么，而不是内容消失或者用完div，你现在只需要水平滚动就能看到它。

或者你可以做的是添加

.wide { overflow: scroll; }

这将使视口保持相同的大小，但使.wide内的内容可以像iframe一样滚动。可能比第一个解决方案更好看。无论您决定什么，都是您的设计选择。但最重要的是使用媒体查询并尝试尽可能减少表单。显示块和百分比宽度是你的朋友。

所有屏幕分辨率的全宽div

2 个答案: