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

Question

我正在寻找一个解决方案(最好是在 css 或 html 中)来使我的表在 div 容器内挤压它的 以便它们在浏览器打开时留在 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% 的不同组合，但没有成功。非常感谢任何见解。

Answer 1

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

因此，最好的方法是使用带有 float 选项的 DIV。这是一个简短的example我在说什么。