Buat DIV mengisi seluruh sel tabel

Saya telah melihat pertanyaan ini dan sedikit googled , tetapi sejauh ini tidak ada yang berhasil. Saya pikir ini 2010 sekarang (pertanyaan-pertanyaan / jawaban sudah tua dan, well, belum terjawab) dan kami memiliki CSS3! Apakah ada cara untuk mendapatkan div untuk mengisi lebar dan tinggi sel seluruh tabel menggunakan CSS?

Saya tidak tahu berapa lebar dan / atau tinggi sel di masa depan, dan mengatur lebar dan tinggi div hingga 100% tidak berfungsi.

Juga, alasan saya membutuhkan div adalah karena saya harus benar-benar memposisikan beberapa elemen di luar sel, dan position: relativetidak berlaku untuk tds, jadi saya perlu div pembungkus.

Kode berikut berfungsi pada mode kompatibilitas IE8 8, IE 8 IE 8, dan Chrome (tidak diuji di tempat lain):

<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>

Anda mengatakan dalam pertanyaan asli Anda bahwa pengaturan widthdan heightuntuk 100%tidak bekerja, meskipun, yang membuat saya menduga bahwa ada beberapa aturan lainnya utama itu. Apakah Anda memeriksa gaya yang dihitung di Chrome atau Firebug untuk melihat apakah aturan lebar / tinggi benar-benar diterapkan?

Edit

Betapa bodohnya saya! The divitu ukuran teks, tidak ke td. Anda dapat memperbaikinya di Chrome dengan membuatnya div display:inline-block, tetapi tidak berfungsi di IE. Itu membuktikan lebih sulit ...

tinggi div = 100% dalam sel tabel hanya akan berfungsi ketika tabel memiliki atribut tinggi itu sendiri.

<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>

UPD di FireFox Anda juga harus menetapkan height=100%nilai ke TDelemen induk

Saya harus menetapkan tinggi palsu ke <tr>tinggi dan: mewarisi untuk<td>s

tr telah height: 1px(toh diabaikan)

Kemudian atur td height: inherit

Kemudian atur div ke height: 100%

Ini bekerja untuk saya di IE edge dan 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>

Jika alasan Anda ingin div 100% di dalam sel tabel adalah untuk dapat memiliki warna latar memanjang hingga ketinggian penuh tetapi masih bisa memiliki jarak antar sel, Anda bisa memberikan <td>sendiri warna latar belakang dan menggunakan CSS properti border-spacing untuk membuat margin antar sel.

Namun, jika Anda benar-benar membutuhkan div ketinggian 100%, maka seperti yang disebutkan di sini, Anda harus menetapkan ketinggian tetap ke <table>atau menggunakan Javascript.

Jadi, karena semua orang memposting solusi mereka dan tidak ada yang baik untuk saya, ini milik saya (diuji di Chrome & Firefox).

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

Fiddle: https://jsfiddle.net/nh6g5fzv/

Karena setiap browser lain (termasuk IE 7, 8 dan 9) menangani position:relativesel tabel dengan benar dan hanya Firefox yang salah, cara terbaik Anda adalah menggunakan shim JavaScript. Anda tidak perlu mengubah DOM Anda untuk satu browser yang gagal. Orang-orang menggunakan shims sepanjang waktu ketika IE mendapatkan sesuatu yang salah dan semua browser lainnya memperbaikinya.

Berikut ini cuplikan dengan semua kode yang dianotasi. JavaScript, HTML, dan CSS menggunakan praktik desain web responsif dalam contoh saya, tetapi Anda tidak harus melakukannya jika tidak mau. (Responsif berarti menyesuaikan dengan lebar browser Anda.)

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

Berikut adalah kode itu sendiri, tetapi tidak masuk akal tanpa konteksnya, jadi kunjungi URL jsfiddle di atas. (Cuplikan lengkap juga memiliki banyak komentar di CSS dan 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();
    }
});

Saya mengusulkan solusi menggunakan percobaan Flexbox untuk mensimulasikan tata letak tabel yang memungkinkan elemen konten sel mengisi sel induknya secara vertikal:

Demo

.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>

setelah beberapa hari mencari, saya menemukan kemungkinan perbaikan untuk masalah ini.

 <!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>

Bahasa Spanyol: El truco es establecer la Tabla, el TR y el TD tinggi: 100%. Esto hace kompatibel dengan FireFox y Chrome. Internet Explorer ignora eso, por pon queos la etiqueta blok TD como. Klik tombol untuk membuka Explorer untuk altura máxima.

Penjelasan bahasa Inggris: dalam kode komentar

jika <table> <tr> <td> <div>semua telah height: 100%;ditetapkan, maka div akan mengisi ketinggian sel dinamis di semua browser.

Ok tidak ada yang menyebutkan ini jadi saya pikir saya akan memposting trik ini:

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

overflow: otomatis pada div kontainer di dalam sel melakukan trik untuk saya. Tanpanya div tidak menggunakan seluruh ketinggian.

Jika sel tabel adalah ukuran yang Anda inginkan, tambahkan saja kelas css ini dan tetapkan ke div Anda:

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

Jika Anda ingin sel tabel untuk mengisi induk juga, tetapkan kelas ke sel tabel juga. Saya harap ini membantu.

sedikit terlambat ke pesta tapi inilah solusi saya:

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

Karena saya tidak memiliki reputasi yang cukup untuk mengirim komentar, saya ingin menambahkan solusi lintas-browser lengkap yang menggabungkan pendekatan @Madeorsk dan @ Saadat dengan sedikit modifikasi! (Diuji pada Chrome, Firefox, Safari, IE, dan Edge pada 2/10/2020)

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!
} 

Namun, jika Anda seperti saya, Anda juga ingin mengontrol perataan vertikal, dan dalam hal ini, saya suka menggunakan flexbox:

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

Saya pikir solusi terbaik adalah menggunakan JavaScript.

Tetapi saya tidak yakin bahwa Anda perlu melakukan ini untuk menyelesaikan masalah Anda tentang penempatan elemen di bagian <td>luar sel. Untuk itu Anda bisa melakukan sesuatu seperti ini:

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

Tidak sejalan tentu saja, tetapi dengan kelas dan id.

Untuk membuat tinggi: 100% berfungsi untuk div bagian dalam, Anda harus mengatur ketinggian untuk induk td. Untuk kasus khusus saya ini bekerja menggunakan ketinggian: 100%. Hal ini membuat bagian dalam div tinggi, sedangkan elemen lain dari tabel tidak memungkinkan td menjadi terlalu besar. Anda tentu saja dapat menggunakan nilai lain dari 100%

Jika Anda ingin juga membuat sel tabel memiliki ketinggian tetap sehingga tidak menjadi lebih besar berdasarkan konten (untuk membuat gulir div bagian dalam atau menyembunyikan overflow), saat itulah Anda tidak punya pilihan selain melakukan beberapa trik js. Induk td harus memiliki tinggi yang ditentukan dalam satuan non-relatif (bukan%). Dan Anda kemungkinan besar tidak punya pilihan selain menghitung ketinggian itu menggunakan js. Ini juga akan membutuhkan tata letak tabel: gaya tetap ditetapkan untuk elemen tabel

Saya mengalami masalah yang sama sering dan selalu hanya menggunakan table-layout: fixed;pada tableelemen dan height: 100%;pada div batin.

Saya akhirnya tidak menemukan apa pun yang akan berfungsi di semua browser saya dan semua mode rendering browser / DocTypes, kecuali untuk menggunakan jQuery. Jadi inilah yang saya pikirkan.
Bahkan memperhitungkan 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);

Diuji dalam IE11 (mode Tepi), FF42, Chrome44 +. Tidak diuji dengan tabel bersarang.

Anda bisa melakukannya seperti itu:

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

Jika elemen yang diposisikan dan elemen bapaknya tidak memiliki lebar dan tinggi, maka atur

padding: 0;

dalam elemen ayahnya,

Ini mungkin tidak disarankan.

Saya menemukan solusi yang berfungsi jika div Anda tidak mengandung teks dan memiliki latar belakang yang seragam.

display: 'list-item'

memberikan div tinggi dan lebar yang diinginkan, tetapi dengan kelemahan besar memiliki daftar item peluru. Karena div memiliki warna latar yang homogen, saya menyingkirkan peluru dengan gaya-gaya tersebut:

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

Saya tidak yakin apa yang ingin Anda lakukan tetapi Anda dapat mencoba yang ini:

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

Berikut ini harus bekerja. Anda harus mengatur ketinggian ke sel induk. 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>

Coba ini:

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

Coba letakkan display: blok tabel di dalam sel

Saya tidak melihat di sini CSS-trick lama untuk < div > di dalam < td >. Oleh karena itu saya ingatkan: sederhanakan menetapkan beberapa nilai minimal untuk lebar , tetapi apa yang Anda butuhkan untuk lebar minimum . Sebagai contoh:

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

The td width 's, dalam kasus itu, terserah Anda.

Ini adalah Solusi untuk memperpanjang tinggi 100% dan lebar 100% dalam html <td>

jika Anda menghapus baris pertama dalam kode Anda, Anda dapat memperbaikinya ...

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

karena doctype ini tidak mengizinkan dalam beberapa file untuk menggunakan 100% persen di dalamnya <td>, tetapi jika Anda menghapus baris ini, tubuh gagal memperluas latar belakang ke ketinggian 100% dan lebar 100%, jadi saya menemukan ini DOCTYPEyang menyelesaikan masalah

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

DOCTYPE ini memungkinkan Anda memperluas latar belakang di tubuh Anda dengan tinggi 100% dan lebar 100%, dan memungkinkan Anda mengambil semua tinggi 100% dan lebar 100% ke dalam <td>