必要な一般部cssと重ならないようなテーブル)

StackOverflow https://stackoverflow.com/questions/723476

  •  05-09-2019
  •  | 
  •  

質問

私は利用しようとdivsの代わりにテーブルスタイル箱の私です。のコンテンツ サイズ とできるようにすることが求められ、ブラウザによる リサイズをある程度.必要性の背景色や国境を のコンテンツ.この作品を緻密にします。どうやっていけばいいですか？部作と同じ。

注意：い"_"s"私の非破壊とが明らかになりました。って失われています。

サンプルページ

サンプル画像

alt text
（出典： 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>
役に立ちましたか？

解決

あることは容易ではありませないということはcrossbrowserに優しいことを知っています。

少なくともfirefoxを作成することができます模擬テーブルに設定divsと

display:table;
display:table-row;
display:table-cell;

そdivsのように動作しテーブルです。その後のボックスが含まれます。天気の良い解決法はdebateable.

私はやっているのも同様の問題とページのレイアウトを行った。通常、私は解決の方による設定min-幅とオーバーフロー:auto;

他のヒント

ばねを利用したいテーブルを実行します。

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

次回はこのような問題が登場へ giveupandusetables.com.

一方は箱に浮かぶ.追加float:left;リンク先のホームページの内容に、ボックス-ヘッダー、ボックス。追加クリア両;リンク先のホームページの内容-体力で以下のボックス-ヘッダを表します。か追加する必要があり明確な財産にな内容を下記のとおりです。

まず右端のボックス-ヘッダボックス体揃えれています。したい場合はその幅と同じです。テーブルはすべての細胞は同じ列の幅.

その他のアイデア、チェックアウト この質問.

まず、使用意味マークアップ等を行っています。がそろわない場合は、ヘッダおよびコンテンツマークは、そのようなヘッダー付き項の規定まることが期待される。がございますので、テーブル方"を考えたごみをエミュレートするマークアップおよびスタイルのように、テーブルのマークアップに来て最初に、CSSできます。

以下のなにをしたい:

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

を考えるマークアップやスタイルを別のパスCSS Zen Mastery:o)

この作品を実際にとりテーブルie7）

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}

注意：両箱て同左右のパディングまたは突出しております。

山車は必要ではないが、使いにくの証拠金に対すパディングします。以下のマイナが快適になるスタイル作品として必要なものです:

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

私のパディングのボックスをマージン移動のボーダをボックスを追加しました下線のヘッダを表します。

私はこの問題にもFirefoxをお使いの6.0.1は、オペラ10.62、Safari5.1、IE9、オーバーフロー：オート固定ですべてのブラウザを推奨いたします。他には何もないました。もしオーバーフロー:含まれる固定に問題が、これが有効な値でないためにオーバーフロー、私はこの値は有効でない、オート置換した.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top