自动调整div容器html中的表中的列大小 [英] Auto resize columns in a table within a div container html

问题描述

我正在寻找一个解决方案（最好在css或html），使我的表在一个div容器中挤压其< td> s，以便他们留在div容器内的浏览器调整大小。 http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311 /ex.html 请注意，如何更改broswer大小的单元格的内容更改大小，但我想要的单元格的大小是固定的和列更改。因此，如果浏览器很小，表将是2列而不是6.示例html代码：

I'm looking for a solution (preferably in css or html) to make it so that my table which is inside a div container to squish its <td>'s so that they stay inside the div container when the browser is resized. http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311/ex.html Notice how as you change the broswer size the contents of the cells change size but I want the size of the cells to be fixed and the columns change. So if the browser was small the table would be something like 2 columns rather than 6. Example html code:

<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％，但事情不工作。非常感谢任何见解。

I feel like this can be solved with simple css. I keep trying different combinations of where the width:100% goes but things don't work out. Any insight is very much appreciated.

推荐答案

很好，不幸的是，这不是那么简单。如果你考虑它，在你的例子中，你有一列上6列，然后三个在另一个。你不能只是将对象移动到行外，因为正如你所期望的那样，表设计为保持指定行中的所有内容。

Well, unfortunately it's not that simple. If you think about it, in your example you have 6 columns on one row, and then three on the other. You won't be able to just move the objects outside of the row because as you would expect, the table is designed to keep everything in the specified row(s).

所以，最好的方法是使用DIV的float选项。
这是一个简短的例子我在说什么。

So, the best way to go about that is to use DIV's with the float option. Here is a brief example of what I'm talking about.

这篇关于自动调整div容器html中的表中的列大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！