web-dev-qa-db-ja.com

CSSで、コンテナーdivに合わせてテーブルを拡張するにはどうすればよいですか？

複数のコンテナーDIVを作成して画面上のスペースを「切り分け」、それから各DIVにコンテンツを入力したいと思います。ある場合には、テーブルを埋める必要があります。

テーブルの最も内側の部分はjpeg <img>。固定ピクセルサイズをどこにも使用したくないので、コンテンツがさまざまなサイズのブラウザーで適切に縮小されます。

試行錯誤を繰り返し、インターネットでいくつか読んだ後、私はそれがチェーン全体のコンテナ-div ---> table-> tbody-> tr-> td-> imgがサイズにうまく収まるようにすることを理解しました、これらの各要素に次の属性があることを確認する必要があります"height:100%; width:100; position:relative"（imgの位置自体を絶対にすることもできます）。

これは、1行のみのテーブルで正常に機能します。しかし、複数の行がある場合、行の高さはその親であるtbodyからナイーブに計算されているように見えます。これは、2つの行がある場合、各行は依然としてtbodyと同じ高さだからです。しかし、手動でTRの高さを2で割った後でも、コンテナーに正確に収まりません。

では、テーブルを自動的に周囲のコンテナに縮小するにはどうすればよいですか？

    <style type="text/css">

div {
border : 2px solid red;
}

#bottom-banner {
height:40%;
}

#bottom-banner tbody {
position:relative;
height:100%;
width:100%;
}

#bottom-banner tr {
max-height:100%;
width:100%;
position:relative;
height:100%;
}


<style type="text/css">

div {
border : 2px solid red;
}

#bottom-banner {
height:40%;
}

#bottom-banner tbody {
position:relative;
height:100%;
width:100%;
}

#bottom-banner tr {
max-height:100%;
width:100%;
position:relative;
height:100%;
}
#bottom-banner table {
position:relative;
height:100%;
width:100%;
}

#bottom-banner div {
position:relative;
height:100%;
width:100%;
}

#bottom-banner img {
height:100%;
position:absolute;
right:0;
left:0;
margin:auto;
top:0;
bottom:0;
width:auto;
}
</style>

<div id="bottom-banner">

<table><tbody>
<tr>
<td >
<div><img src="11a2.jpg"/></div>
</td>
</tr>

<tr>
<td >
<div><img src="11a2.jpg"/></div>
</td>
</tr>

</tbody></table>
</div>
htmlcsshtml-tableresize
11
teddy teddy

テーブルの幅と高さを100％に設定するだけです。ただし、セルが空の場合、テーブルの親divには高さが割り当てられている必要があります。セルが空の場合、高さを指定しないと縦のスペースを占有しません。

div { width: 100%;height: 500px;border: 5px yellow solid; }
table { width: 100%;height: 100%;border: 3px red double; }
<div>
  <table>
    <tr>
      <td bgcolor="#2062AF"></td>
      <td bgcolor="#05BDB0"></td>
      <td bgcolor="#FEFCC2"></td>
      <td bgcolor="#FAA72A"></td>
      <td bgcolor="#CD3450"></td>
    </tr>
  </table>
</div>
11
davidcondrey