表宽度超过容器宽度

Question

我正在开发一个报告应用程序，该应用程序生成HTML表格，这些表格可以是多行高，多列长（有时是40或更多）。

问题是，这些表中的许多表在它们包含的div之外延伸，它看起来很丑陋。由于某种原因，包含div不会拉伸到表的大小。

所以，这是我的问题：是否可以使用CSS将包含元素拉伸到表的宽度？

这是jfiddle，问题处于最基本的水平。

Answer 1

给你的容器一个浮动，迫使它伸展到内容的宽度：

div{
    border:2px solid #F00;
    padding:10px;   
    float: left; 
}

Fiddle

Answer 2

只需添加<div style="overfow:auto"><table>并快乐编码

＆＃13;

＆＃13;

div{
    border:2px solid #F00;
    padding:10px;    
}
table{
    border:2px solid #00F;    
}
td, th{
    border:1px solid #00F;
    padding:4px;    
}

＆＃13;

<div style="overflow: auto">
    <table>
        <tr>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
        </tr>
        <tr>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
            <td>Lorem</td>
            <td>Ipsum</td>
            <td>Dolor</td>
            <td>Sit</td>
            <td>Amet</td>
        </tr>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

考虑另一种方法 - 在表类中设置固定的表格布局：

table-layout:auto;

来自另一个Stackoverflow question的想法