DIVでテーブルセル全体を埋める

私はこの質問を見てグーグルで調べましたが、これまでのところ何も機能していません。私はそれが2010年であると考えています（これらの質問/回答は古く、未回答です）。CSS3があります！CSSを使用してdivでテーブルセル全体の幅と高さを埋める方法はありますか？

セルの幅や高さが事前にどのようになるかわからないため、divの幅と高さを100％に設定しても機能しません。

また、divが必要な理由は、一部の要素をセルの外側に絶対的に配置する必要があるためであり、sにposition: relativeは適用されないtdため、ラッパーdivが必要です。

次のコードは、IE 8、IE 8のIE 7互換モード、およびChrome（他ではテストされていません）で動作します。

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

ただし、元の質問で設定widthと機能が機能heightし100%なかったとおっしゃっていましたが、それを上書きする他のルールがあると思われます。ChromeまたはFirebugで計算されたスタイルをチェックして、幅/高さのルールが実際に適用されているかどうかを確認しましたか？

編集する

私はなんてばかです！divテキストに、しないようにサイジングされましたtd。これをChromeで修正するにはdiv display:inline-block、を作成しますが、IEでは機能しません。それはよりトリッキーなことを証明しています...

div height = 100％in table cellは、テーブルに高さ属性自体がある場合にのみ機能します。

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

FireFoxのUPDではheight=100%、親TD要素にも値を設定する必要があります

私は偽の高さをおよび高さに設定する必要がありました：継承<tr><td>s

trは持っていますheight: 1px（とにかく無視されます）

次にtdを設定します height: inherit

次に、divを height: 100%

これは私のためにIEエッジとChromeでうまくいきました：

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

表のセル内に100％のdivが必要な理由が、背景色を完全な高さまで拡張できるようにする一方で、セル間の間隔を確保できるようにする場合は、 <td>自体に背景色を設定してCSSを使用できます。セル間のマージンを作成するためのborder-spacingプロパティ。

ただし、100％の高さのdivが本当に必要な場合は、ここで他の人が述べているように、固定の高さをに割り当てるか、<table>Javascriptを使用する必要があります。

だから、誰もが彼らの解決策を投稿していて、どれも私にとって良いものではなかったので、これは私のものです（ChromeとFirefoxでテストされています）。

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

フィドル：https : //jsfiddle.net/nh6g5fzv/

他のすべてのブラウザー（IE 7、8、9を含む）はposition:relativeテーブルセルを正しく処理し、Firefox のみが正しく機能しないため、JavaScriptシムを使用することをお勧めします。失敗した1つのブラウザーでDOMを変更する必要はありません。IEで何か問題が発生し、他のすべてのブラウザーで問題が解決する場合、人々は常にシムを使用します。

以下は、すべてのコードに注釈が付けられたスニペットです。JavaScript、HTML、CSSは、私の例ではレスポンシブWebデザインの手法を使用していますが、必要がない場合は、そうする必要はありません。（レスポンシブとは、ブラウザの幅に適応することを意味します。）

http://jsfiddle.net/mrbinky3000/MfWuV/33/

ここにコード自体がありますが、コンテキストがないと意味がありません。上記のjsfiddle URLにアクセスしてください。（完全なスニペットには、CSSとJavaScriptの両方にたくさんのコメントがあります。）

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

私はソリューションを提案します 実験的な セルのコンテンツ要素が親セルを垂直方向に埋めることを可能にするテーブルレイアウトをシミュレートするFlexbox：

デモ

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

数日検索した後、私はこの問題の可能な修正を見つけました。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

スペイン語：El truco es establecer la Tabla、el TR y el TD a height：100％。Esto lo hace互換性のあるFireFox y Chrome。Internet Explorer ignora eso、por lo que ponemos la etiqueta TDコモブロック。De esta forma Explorersítoma la alturamáxima。

英語の説明：コード解説内

<table> <tr> <td> <div>すべてがheight: 100%;設定されている場合、divはすべてのブラウザーの動的セルの高さを埋めます。

誰もこれに言及しなかったので、私はこのトリックを投稿すると思いました：

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

セル内のそのコンテナーdivのoverflow：autoが私にとってはトリックです。これがないと、divは高さ全体を使用しません。

テーブルのセルが必要なサイズの場合は、このcssクラスを追加して、divに割り当てます。

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

テーブルセルにも親を埋める場合は、クラスをテーブルセルにも割り当てます。お役に立てば幸いです。

パーティーには少し遅れますが、これが私の解決策です：

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

コメントを投稿するのに十分な評判がないため、@ Madeorskと@Saadatのアプローチをわずかに変更して組み合わせた完全なクロスブラウザーソリューションを追加したいと思います。（2020年2月10日現在、Chrome、Firefox、Safari、IE、およびEdgeでテスト済み）

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

ただし、私と同じように、垂直方向の配置も制御したい場合は、次のようにflexboxを使用します。

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

最善の解決策はJavaScriptを使用することだと思います。

しかし<td>、セルの外側に要素を配置するという問題を解決するためにこれを行う必要があるかどうかはわかりません。そのためには、次のようなことができます。

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

もちろんインラインではありませんが、クラスとIDがあります。

height：100％を内部divで機能させるには、親tdの高さを設定する必要があります。私の特定のケースでは、height：100％を使用して機能しました。これにより、内側のdivの高さが伸びましたが、テーブルの他の要素ではtdが大きくなりすぎませんでした。もちろん100％以外の値も使用できます

表のセルの高さを固定して、コンテンツに基づいて大きくならないようにする場合（内側のdivをスクロールするか、オーバーフローを非表示にするため）、つまり、いくつかのjsトリックを行うしかありません。親tdは、高さが非相対単位（％ではない）で指定されている必要があります。そして、あなたはおそらくjsを使用してその高さを計算する以外に選択肢がないでしょう。これには、テーブル要素にtable-layout：fixedスタイルセットも必要です。

同様の問題が頻繁に発生し、常に要素と内部divでのみ使用さtable-layout: fixed;れます。tableheight: 100%;

最終的に、jQueryを使用することを除いて、すべてのブラウザーとすべてのDocTypes /ブラウザーレンダリングモードで機能するものは何も見つかりませんでした。これが私が思いついたものです。
rowspanも考慮されます。

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

IE11（エッジモード）、FF42、Chrome44 +でテスト済み。ネストされたテーブルではテストされていません。

あなたはそれをそのようにすることができます：

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

配置された要素とその親要素に幅と高さがない場合は、

padding: 0;

その父の要素で、

これはおそらくお勧めできません。

divにテキストが含まれておらず、背景が均一である場合に機能する回避策を見つけました。

display: 'list-item'

divに必要な高さと幅を与えますが、リストアイテムの箇条書きがあるという大きな欠点があります。divは均一な背景色を持っているので、これらのスタイルで箇条書きを取り除きました：

list-style-position: 'inside',
color: *background-color*,

あなたが何をしたいのか分かりませんが、これを試してみてください：

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

以下はうまくいくはずです。親セルに高さを設定する必要があります。 https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

これを試して：

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

セル内にdisplay：tableブロックを入れてみてください

ここでは、< td > 内の< div >の古いCSSトリックを監視していません。したがって、私が思い出さ：簡単なセットのためのいくつかの最低限の値の幅が、どのような-ます-必要性のための最小幅を。例えば：

<div style="width: 3px; min-width: 99%;">

TDの幅が、その場合には、あなた次第です。

これは、htmlで100％の高さと100％の幅を拡張するための私のソリューションです <td>

コードの最初の行を削除すると、修正できます...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

このdoctypeは一部のファイルで内の100％パーセントを使用することを許可していませんが<td>、この行を削除すると、ボディが背景を高さ100％と幅100％に拡大できなくなりDOCTYPE、問題を解決することがわかりました

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

このDOCTYPEを使用すると、ボディの背景を高さ100％、幅100％に拡張でき、高さ100％、幅100％をすべて <td>