4

我正在寻找一种解决方案（最好是在 css 或 html 中），以使我位于 div 容器内的表压缩它的 <td>，以便在调整浏览器大小时它们留在 div 容器内。http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311/ex.html请注意，当您更改浏览器大小时，单元格的内容如何更改大小，但我希望固定单元格的大小和列改变。因此，如果浏览器很小，表格将是 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来解决。我一直在尝试 width:100% 的不同组合，但没有成功。非常感谢任何见解。

4

2 回答 2

1

好吧，不幸的是，事情没那么简单。如果您考虑一下，在您的示例中，一行有 6 列，另一行有 3 列。您将无法仅将对象移到行外，因为正如您所料，该表旨在将所有内容保留在指定的行中。

因此，最好的方法是使用带有浮动选项的 DIV。这是我正在谈论的一个简短示例。

于 2012-07-24T18:05:53.360 回答
0

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

于 2012-07-24T17:57:08.320 回答