テーブルの代わりに div を使用して、コンテンツの周りにボックスのスタイルを設定しようとしています。コンテンツは任意のサイズにすることができ、ブラウザのサイズを任意に変更できる必要があります。コンテンツを含めるには、背景色と境界線が必要です。これはテーブルでうまく機能します。div を同じように動作させるにはどうすればよいですか?
注: 改行しないスペースが失われていたため、「_」を追加しました。
(ソース: c3o.com )
コンテンツ:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>