Question

我正在寻找一个解决方案（最好是在css或html中），以便我的表位于div容器内以挤压其＆lt; td＆gt;以便它们在浏览器时保留在div容器内调整大小。 http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311/ex.html请注意，当您更改broswer大小时，单元格的内容会更改大小，但我希望修复单元格的大小并更改列。因此，如果浏览器很小，那么表格就像2列而不是6。示例html代码：

<div id="imageline">
    <table width="100%">
    <tr>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
    </tr>
    <tr>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
    </tr>
    </table>
</div>

Css代码：

#imageline {
width: 100%;
position:relative;
}

我觉得这可以用简单的CSS解决。我一直在尝试宽度：100％的不同组合，但事情并没有成功。非常感谢任何见解。

Answer 1

嗯，不幸的是，事情并非那么简单。如果您考虑一下，在您的示例中，您在一行中有6列，然后在另一行上有三列。您将无法仅将对象移动到行外部，因为正如您所期望的那样，该表旨在将所有内容保留在指定的行中。

因此，最好的方法是使用带浮动选项的DIV。以下是我所谈论的example的简短内容。

Answer 2

最佳解决方案是将您的内容放在div中，每个float: left;并指定每个内容的高度和宽度。如果您真的必须使用表，则必须查看媒体查询，以便根据用户浏览器窗口的大小调整样式表。但这会复杂得多。

自动调整div容器html中表格中的列

2 个答案: