3

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

问题是，这些表中的许多都超出了它们包含的 div，而且看起来很丑。出于某种原因，包含的 div 不会拉伸到表格的大小。

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

这是最基本的问题。

4

3 回答 3

3

给你的容器一个浮动，强制它拉伸到内容的宽度：

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

小提琴

于 2012-07-17T22:46:25.743 回答
2

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

div{
    border:2px solid #F00;
    padding:10px;    
}
table{
    border:2px solid #00F;    
}
td, th{
    border:1px solid #00F;
    padding:4px;    
}
<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>

于 2016-07-24T18:30:54.497 回答
0

考虑另一种方法——在表格类中将表格布局设置为固定：

table-layout:auto;

来自另一个Stackoverflow 问题的想法

于 2015-06-25T16:20:21.890 回答