ทำให้ DIV เติมเซลล์ทั้งตาราง

ฉันเคยเห็นคำถามนี้และgoogled เล็กน้อยแต่ไม่มีอะไรได้ทำงาน ฉันคิดว่าเป็นปี 2010 แล้ว (คำถาม / คำตอบเหล่านั้นเก่าและยังไม่ได้ตอบ) และเรามี CSS3! มีวิธีใดที่จะให้ div เติมทั้งความกว้างและความสูงของเซลล์ตารางทั้งหมดโดยใช้ CSS?

ฉันไม่รู้ว่าความกว้างและ / หรือความสูงของเซลล์จะเป็นอย่างไรก่อนเวลาและการตั้งค่าความกว้างและความสูงของ div ให้เป็น 100% ไม่ทำงาน

นอกจากนี้เหตุผลที่ฉันต้องการ div คือเพราะฉันต้องการวางองค์ประกอบบางอย่างนอกเซลล์อย่างแน่นอนและposition: relativeไม่ได้ใช้กับtds ดังนั้นฉันจึงต้องการ div wrapper

รหัสต่อไปนี้ใช้งานได้ในโหมดความเข้ากันได้ของ IE 8, IE 8 และ IE (ไม่ได้ทดสอบที่อื่น):

<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% ในเซลล์ตารางจะทำงานเฉพาะเมื่อตารางมีแอตทริบิวต์ height เท่านั้น

<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ใน FireFox คุณควรตั้งheight=100%ค่าเป็นTDองค์ประกอบหลัก

ฉันต้องตั้งค่าความสูงปลอมเป็น<tr>และสูง: สืบทอดมา<td>s

tr มีheight: 1px(มันถูกละเว้นอยู่แล้ว)

จากนั้นตั้งค่า td height: inherit

จากนั้นตั้งค่า div เป็น height: 100%

สิ่งนี้ใช้ได้กับฉันใน IE edge และ 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>

หากเหตุผลของคุณที่ต้องการ div 100% ภายในเซลล์ตารางจะสามารถให้สีพื้นหลังขยายเป็นความสูงเต็ม แต่ยังสามารถเว้นระยะห่างระหว่างเซลล์ได้คุณสามารถให้<td>สีพื้นหลังกับตัวเองและใช้ CSS คุณสมบัติระยะห่างระหว่างเส้นขอบเพื่อสร้างระยะห่างระหว่างเซลล์

อย่างไรก็ตามหากคุณต้องการ div ความสูง 100% อย่างแท้จริงเนื่องจากที่คนอื่น ๆ ในที่นี้ได้กล่าวถึงคุณต้องกำหนดความสูงคงที่ให้กับ<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 shim คุณไม่ควรเปลี่ยน DOM ของคุณสำหรับเบราว์เซอร์ที่ล้มเหลว ผู้คนใช้งานตลอดเวลาเมื่อ IE เกิดความผิดพลาดและเบราว์เซอร์อื่นทั้งหมดทำให้ถูกต้อง

นี่คือตัวอย่างข้อมูลที่มีรหัสทั้งหมดมีคำอธิบายประกอบ JavaScript, HTML และ CSS ใช้แนวทางการออกแบบเว็บไซต์ที่ตอบสนองได้ในตัวอย่างของฉัน แต่คุณไม่จำเป็นต้องทำถ้าคุณไม่ต้องการ (การตอบสนองหมายถึงปรับให้เหมาะกับความกว้างของเบราว์เซอร์ของคุณ)

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

นี่คือโค้ดของตัวเอง แต่มันไม่สมเหตุสมผลหากไม่มีบริบทดังนั้นให้ไปที่ URL jsfiddle ด้านบน (ตัวอย่างข้อมูลแบบเต็มยังมีความคิดเห็นมากมายทั้งใน 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 ความสูง: 100% เข้ากันได้กับ FireFox และ Chrome Internet Explorer จะไม่ทำการติดตั้งบล็อก TD ของคุณ ในรูปแบบ Explorer ที่มีขนาดเล็กมาก

คำอธิบายภาษาอังกฤษ: ภายในข้อคิดเห็นรหัส

ถ้า<table> <tr> <td> <div>ทุกคนได้height: 100%;ตั้งแล้ว div ที่จะเติมความสูงของเซลล์แบบไดนามิกในเบราว์เซอร์

ตกลงไม่มีใครพูดถึงเรื่องนี้ดังนั้นฉันคิดว่าฉันจะโพสต์เคล็ดลับนี้:

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

ล้น: อัตโนมัติใน div คอนเทนเนอร์ที่อยู่ในเซลล์ทำเคล็ดลับสำหรับฉัน ถ้าไม่มีมัน 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 เข้ากับการดัดแปลงเล็กน้อย! (ทดสอบบน Chrome, Firefox, Safari, IE และ Edge ตั้งแต่ 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!
} 

อย่างไรก็ตามหากคุณชอบฉันมากกว่าที่คุณต้องการควบคุมการจัดตำแหน่งแนวตั้งด้วยและในกรณีเหล่านั้นฉันชอบใช้ 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>

ไม่ใช่แบบอินไลน์แน่นอน แต่มีคลาสและรหัส

ในการสร้างความสูง: 100% ทำงานให้กับ div ภายในคุณต้องตั้งค่าความสูงสำหรับ parent td สำหรับกรณีของฉันมันใช้ความสูงได้: 100% สิ่งนี้ทำให้ความสูง div สูงขึ้นในขณะที่องค์ประกอบอื่น ๆ ของตารางไม่อนุญาตให้ td ใหญ่เกินไป แน่นอนคุณสามารถใช้ค่าอื่น ๆ ได้มากกว่า 100%

หากคุณต้องการทำให้เซลล์ตารางมีความสูงคงที่เพื่อไม่ให้ใหญ่ขึ้นตามเนื้อหา (เพื่อให้การเลื่อนด้านในหรือซ่อนการโอเวอร์โฟลว์) นั่นคือเมื่อคุณไม่มีทางเลือก แต่ใช้เทคนิค js บางอย่าง parent td จะต้องมีความสูงที่ระบุในหน่วยที่ไม่ใช่แบบสัมพันธ์ (ไม่ใช่%) และคุณอาจจะไม่มีทางเลือกนอกจากการคำนวณความสูงนั้นด้วย js สิ่งนี้จะต้องมีรูปแบบตาราง: ลักษณะคงที่ที่กำหนดไว้สำหรับองค์ประกอบตาราง

ฉันพบปัญหาที่คล้ายกันบ่อยครั้งและมักจะใช้table-layout: fixed;กับtableองค์ประกอบและheight: 100%;บน div ภายใน

ในที่สุดฉันก็พบว่าไม่มีอะไรที่จะทำงานกับเบราว์เซอร์ของฉันและโหมดการแสดงผล DocTypes / เบราว์เซอร์ทั้งหมดยกเว้นการใช้ jQuery ดังนั้นนี่คือสิ่งที่ฉันมาด้วย
มันยังคำนึงถึง 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 (โหมด Edge), FF42, Chrome44 + ไม่ได้ทดสอบกับตารางที่ซ้อนกัน

คุณสามารถทำได้เช่นนั้น:

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

หากองค์ประกอบตำแหน่งและองค์ประกอบบิดาไม่มีความกว้างและความสูงให้ตั้งค่า

padding: 0;

ในองค์ประกอบของพ่อ

นี่อาจจะไม่แนะนำ

ฉันหาวิธีแก้ปัญหาซึ่งทำงานได้ถ้า div ของคุณไม่มีข้อความและมีพื้นหลังเหมือนกัน

display: 'list-item'

ช่วยให้ div มีความสูงและความกว้างที่ต้องการ แต่ด้วยข้อเสียใหญ่ของการมีสัญลักษณ์แสดงหัวข้อย่อยรายการ เนื่องจาก div มีสีพื้นหลังที่เป็นเนื้อเดียวกันฉันจึงกำจัด bullet ด้วยสไตล์เหล่านั้น:

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: block table ภายในเซลล์

ฉันไม่ได้ดู CSS-trick แบบเก่าสำหรับ < div > ข้างใน < td > ดังนั้นฉันเตือน: ชุดที่เรียบง่ายค่าบางอย่างน้อยที่สุดสำหรับความกว้างแต่สิ่งที่คุณจำเป็นสำหรับนาทีความกว้าง ตัวอย่างเช่น:

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

td 's ความกว้างในกรณีที่ขึ้นอยู่กับคุณ

นี่คือโซลูชันของฉันสำหรับขยายความสูง 100% และความกว้าง 100% ใน html <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>