3

私は、多くの行の高さと多くの列の長さ (場合によっては 40 以上) の HTML テーブルを生成するレポート アプリケーションに取り組んでいます。

問題は、これらのテーブルの多くが含まれている div の外側に伸びており、見栄えが悪いことです。何らかの理由で、含まれている div がテーブルのサイズに拡張されません。

それで、ここに私の質問があります: CSS を使用して、含まれている要素をテーブルの幅に伸ばすことは可能ですか?

これは、最も基本的なレベルでの問題 に関するjfiddleです。

4

3 に答える 3

3

コンテナーに float を指定して、強制的にコンテンツの幅に引き延ばします。

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 を固定として設定します。

table-layout:auto;

別のStackoverflow の質問からのアイデア

于 2015-06-25T16:20:21.890 に答える