एक संपूर्ण तालिका सेल को DIV भरें

Question

मैंने इस सवाल को देखा है और थोड़ा गुगली किया है , लेकिन अभी तक कुछ भी काम नहीं किया है। मुझे लगता है कि अब यह 2010 है (वे प्रश्न / उत्तर पुराने और ठीक हैं, अनुत्तरित हैं) और हमारे पास CSS3 है! क्या सीएसएस का उपयोग करके पूरे टेबल सेल की चौड़ाई और ऊंचाई को भरने के लिए एक डिव प्राप्त करने का कोई तरीका है?

मुझे नहीं पता कि सेल की चौड़ाई और / या ऊंचाई समय से पहले क्या होगी, और div की चौड़ाई और ऊंचाई को 100% पर सेट करने से काम नहीं होगा।

इसके अलावा, जिस कारण से मुझे div की आवश्यकता है, क्योंकि मुझे सेल के बाहर कुछ तत्वों को बिल्कुल स्थान देने की आवश्यकता है, और s पर position: relativeलागू नहीं होता है td, इसलिए मुझे एक आवरण div की आवश्यकता है।

Comments

क्या तालिका के कंटेनर में स्वयं एक विशिष्ट ऊंचाई है? क्या तालिका पृष्ठ के व्यूपोर्ट को बढ़ाती है?

— पदक विजेता जूल

यह वास्तव में अजीब है कि ऊंचाई और चौड़ाई को 100% पर सेट करना काम नहीं करता है। जिससे डिव को पैरेंट टैग की पूरी चौड़ाई और ऊंचाई मिलनी चाहिए। शायद सापेक्ष स्थिति के कारण यह काम नहीं कर रहा है। जब कोई इसे ढूंढता है तो मैं समाधान देखने के लिए उत्सुक हूं।

— मर्किन

@ तालिका में डेटा गतिशील है, इसलिए मुझे कभी भी ऊँचाई का पता नहीं चलेगा। चौड़ाई स्क्रीन भरता है, हाँ।

— जेसन

आप इस प्रश्न को देखना चाहते हैं: stackoverflow.com/questions/2841484/…

— Gert Grenander

@Marcin यदि टेबल-सेल (यानी कंटेनर) की ऊंचाई स्पष्ट रूप से नहीं बताई गई है, तो आंतरिक DIV पर एक पीसी% ऊंचाई वास्तव में 'ऑटो' के रूप में गणना की जाती है - कल्पना के अनुसार।

— MrWhite

Answer 1

निम्न कोड IE 8, IE 8 के IE 7 संगतता मोड, और क्रोम (अन्यत्र परीक्षण नहीं किया गया) पर काम करता है:

<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%नहीं किया काम, हालांकि, जो बनाता है मुझे संदेह है कुछ अन्य नियम यह अधिभावी नहीं है। क्या आपने क्रोम या फायरबग में गणना की शैली को देखने के लिए यह देखने के लिए कि क्या वास्तव में चौड़ाई / ऊंचाई के नियम लागू किए जा रहे हैं?

संपादित करें

मैं कितना मूर्ख हूँ! divआकार देने वाला था पाठ करने के लिए, करने के लिए नहीं td। आप क्रोम पर div display:inline-blockइसे बनाकर ठीक कर सकते हैं , लेकिन यह IE पर काम नहीं करता है। यह मुश्किल साबित हो रहा है ...

Comments

आह ... अगर अन्य शैलियों को लागू किया जा रहा था तो जाँच पर अच्छा कॉल। जाहिर तौर पर मेरे पास कुछ पैडिंग नियम थे जो मेरी डिव को पूरे टेबल सेल में फैलने से रोक रहे थे। एक बार जब मैं उन से छुटकारा पा गया, तो मुझे कोई समस्या नहीं थी। मैं जिज्ञासु था क्योंकि मेरा कोड आपके जैसा ही दिखता है (पाठ्यक्रम की कक्षाओं का उपयोग करके), लेकिन जब मैंने आगे चेन, लो और निहारना, पैडिंग किया। आपकी सहायता के लिए धन्यवाद।

— जेसन

इस उदाहरण का प्रयास करें: jsfiddle.net/2K2tG ध्यान दें कि सेल w / छवि कैसे लाल है और #abc नहीं है। चौड़ाई / ऊँचाई 100% कुछ नहीं करता

— जेसन

इस लेख के लिए thx; मैं लंबे समय से इसके लिए खोज कर रहा था

— Ionut Flavius ​​Pogacian

जैसा कि जेसन ने बताया, ऊंचाई: 100% कुछ भी नहीं करता है .... यह समस्या को हल नहीं करता है। इनलाइन-ब्लॉक का उल्लेख करते हुए संपादन के लिए धन्यवाद।

— मैट ब्राउन

हाँ यह क्रोम के साथ काम करता है, लेकिन दुर्भाग्य से फ़ायरफ़ॉक्स के लिए नहीं ... jsfiddle.net/38Ngn/1

— प्लूटो

Answer 2

div height = 100% टेबल सेल में तभी काम होगा जब टेबल में ऊंचाई का गुण हो।

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

युपीडी फ़ायर्फ़ॉक्स में आप भी स्थापित करना चाहिए height=100%माता पिता के लिए मूल्य TDतत्व

Comments

यह बहुत अजीब है। मूर्ख कि यह 2012 है और यह बग अभी तक तय नहीं किया गया है

— dylanized

और इसके अलावा, हम और अधिक भुगतान करते हैं

— Ionut Flavius ​​Pogacian

अच्छी चाल, लेकिन मेरे लिए केवल क्रोमियम पर काम किया। IE9 और फ़ायरफ़ॉक्स 19 div को फैलाने में सक्षम नहीं हैं।

— मार्टिन

एक पिक्सेल ऊंचाई का उपयोग करने के बजाय, मैंने 100% ऊंचाई और एक मिनट की ऊंचाई का उपयोग किया: 1px।

— andrea.spot

यदि आप युक्त tdऊंचाई को भी निर्धारित करते हैं 100%, तो इसे एफएफ में काम करना चाहिए। यह सही जवाब है।

— हार्टलेसन

Answer 3

मुझे एक नकली ऊंचाई और ऊंचाई निर्धारित करनी थी : के लिए विरासत<tr><td>s

tr है height: 1px(इसे वैसे भी अनदेखा किया गया है)

फिर td सेट करें height: inherit

फिर div को सेट करें height: 100%

यह मेरे लिए IE किनारे और क्रोम में काम करता है:

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

Comments

मुझे नहीं पता कि यह हमेशा काम करता है, लेकिन यह मेरे लिए IE 11 में काम करता था

— जो मैफेई

मुझे बस td { height: 1px }क्रोम की जरूरत थी ।

— क्रिस हैप्पी

आपका बहुत बहुत धन्यवाद! इसने मुझे एक html तालिका और सेल सामग्री के रूप में एक कोणीय घटक के साथ मदद की।

— फेलिक्स लेमके

Answer 4

यदि टेबल सेल के अंदर 100% div चाहने का आपका कारण बैकग्राउंड कलर को पूरी ऊंचाई तक फैलाने में सक्षम होना था, लेकिन फिर भी कोशिकाओं के बीच रिक्ति होना संभव है, तो आप <td>खुद को बैकग्राउंड कलर दे सकते हैं और CSS का उपयोग कर सकते हैं। बॉर्डर-स्पेसिंग प्रॉपर्टीज़ सेल के बीच मार्जिन बनाने के लिए।

यदि आपको वास्तव में एक 100% ऊंचाई div की आवश्यकता है, तो, जैसा कि यहां अन्य लोगों ने उल्लेख किया है कि आपको या तो एक निश्चित ऊंचाई आवंटित करने <table>या जावास्क्रिप्ट का उपयोग करने की आवश्यकता है।

Comments

आप border-spacing:5px"टेबल" एड एलिमेंट का उपयोग करके सेल को स्पेस दे सकते हैं , लेकिन मैं मानता हूं, सेल के अंदर एक डीआईवी का उपयोग करना अधिक सुरुचिपूर्ण और समग्र रूप से बेहतर है।

— vsync

सुझाव के लिए धन्यवाद, ठीक काम करता है। बस border-collapse: separateमेज पर लागू करने के लिए याद रखें , अन्यथा इसका कोई प्रभाव नहीं होगा। +1

— katzenhut

border-collapse: separateडिफ़ॉल्ट है, लेकिन हाँ, यह एक अच्छी टिप है।

— मैट ब्राउन ने

Answer 5

इसलिए, क्योंकि हर कोई अपना समाधान पोस्ट कर रहा है और कोई भी मेरे लिए अच्छा नहीं था, यहाँ मेरा (क्रोम और फ़ायरफ़ॉक्स पर परीक्षण किया गया) है।

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

फिडल: https://jsfiddle.net/nh6g5fzv/

Comments

आप, सर या मैडम, एक सोने के स्टार के लायक हैं। यह मुझे पागल कर रहा था।

— tylertrotter

Answer 6

चूंकि हर दूसरे ब्राउज़र (IE 7, 8 और 9 सहित) position:relativeएक टेबल सेल पर सही और केवल संभालता है फ़ायरफ़ॉक्स इसे गलत हो जाता है, आपका सबसे अच्छा शर्त एक जावास्क्रिप्ट शिम का उपयोग करना है। आपको एक असफल ब्राउज़र के लिए अपने DOM को बदलना नहीं चाहिए। लोग हर समय शिम का उपयोग करते हैं जब IE कुछ गलत हो जाता है और अन्य सभी ब्राउज़र इसे सही पाते हैं।

यहाँ एक स्निपेट है जिसमें सभी कोड एनोटेट हैं। जावास्क्रिप्ट, HTML और CSS मेरे उदाहरण में उत्तरदायी वेब डिज़ाइन प्रथाओं का उपयोग करते हैं, लेकिन यदि आप नहीं चाहते हैं तो आपके पास नहीं है। (उत्तरदायी का अर्थ है कि यह आपके ब्राउज़र की चौड़ाई के अनुकूल है।)

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

यहां कोड ही है, लेकिन यह संदर्भ के बिना कोई मतलब नहीं है, इसलिए ऊपर दिए गए jsfiddle URL पर जाएं। (पूर्ण स्निपेट में सीएसएस और जावास्क्रिप्ट दोनों में बहुत सारी टिप्पणियां हैं।)

$(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();
    }
});

Comments

हालांकि यह एक अच्छा जवाब था, इस कोड को कॉपी / पेस्ट न करें। $ .browser को jQuery 1.8 से हटा दिया गया है और 1.9 में हटा दिया गया है। अधिक जानकारी के लिए: api.jquery.com/jQuery.browser

— cmegown

मुझे यह उत्तर पसंद है, लेकिन @cmegown ने कहा, $ .browser को अब हटा दिया गया है। मैं इसके बजाय व्यक्तिगत रूप से क्या करूँगा (मैं कोशिश करूँगा कि - मुझे यकीन नहीं है कि यह 100% काम करेगा) तत्व की स्थिति को स्थैतिक से निरपेक्ष (या दूसरे तरीके से) में बदलना होगा और देखें कि क्या है खिड़की की तुलना में तत्व की स्थिति में बदलाव। यह केवल तभी काम करना चाहिए जब तत्व में है top:0; left: 0;।

— निकोला इवानोव निकोलोव

मैं पुष्टि कर सकता हूं कि मेरे लिए काम करने वाला - मुझे तत्व की .offset () मिलती है और फिर इसे पूर्ण स्थिति में बदल देते हैं और इसे ऑफसेट () फिर से प्राप्त करते हैं और यदि यह समान नहीं है, तो मैं इसे एक स्थिति में लपेटता हूं: सापेक्ष div। यह केवल इसलिए काम करता है क्योंकि जब पूरी तरह से तैनात मैं अपने तत्व को बदलने की उम्मीद नहीं करता हूं, तो यह स्थिति है (क्योंकि यह शीर्ष है: 0; बाएं: 0;)

— निकोला इवानोव निकोलोव

फ़ायरफ़ॉक्स "गलत नहीं है"। सीएसएस युक्ति में सापेक्ष रूप से एक तालिका सेल की स्थिति अपरिभाषित है। ( लिंक )

— user2867288

अब फ़ायरफ़ॉक्स (26) में भी जावास्क्रिप्ट के बिना काम करता है। इसके अलावा, यह अब तक केवल एक ही जवाब है जो मेरे लिए काम किया ...

— टॉम ज़ातो - मोनिका

Answer 7

मैं एक समाधान का उपयोग करने का प्रस्ताव देता हूं प्रायोगिक फ्लेक्सबॉक्स एक टेबल लेआउट का अनुकरण करने के लिए जो सेल के सामग्री तत्व को उसके मूल सेल को लंबवत भरने की अनुमति देगा:

डेमो

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

Answer 8

कई दिनों की खोज के बाद मुझे इस मुद्दे के संभावित समाधान का पता चला।

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

स्पैनिश भाषा: एल ट्रुको एसो एस्टेबलिसर ला तबला, एल टीआर वाई एल टीडी एक ऊंचाई: 100%। एस्टो लो हास संगत कॉन फायरफॉक्स वाई क्रोम। इंटरनेट एक्सप्लोरर इग्नोरा एसो, पोर लो क्वान पोनीमोस ला एटिकेटा टीडी कोमो ब्लॉक। डे एस्टा फॉर्मा एक्सप्लोरर एसआई टॉमा ला अल्टूरा मक्सिमा।

अंग्रेजी स्पष्टीकरण: कोड टिप्पणियों के भीतर

Answer 9

यदि <table> <tr> <td> <div>सभी ने height: 100%;सेट किया है, तो div सभी ब्राउज़रों में डायनेमिक सेल ऊंचाई को भरेगा।

Answer 10

ठीक है किसी ने भी इसका उल्लेख नहीं किया इसलिए मुझे लगा कि मैं इस ट्रिक को पोस्ट करूंगा:

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

अतिप्रवाह: सेल के भीतर उस कंटेनर डिव पर ऑटो मेरे लिए चाल करता है। इसके बिना div पूरी ऊंचाई का उपयोग नहीं करता है।

Answer 11

यदि तालिका कक्ष वह आकार है जो आप चाहते हैं, तो बस इस css वर्ग को जोड़ें और इसे अपने div को निर्दिष्ट करें:

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

यदि आप चाहते हैं कि टेबल सेल अभिभावक को भी भरे, तो क्लास को टेबल सेल भी असाइन करें। मुझे उम्मीद है यह मदद करेगा।

Answer 12

पार्टी के लिए थोड़ा देर से लेकिन यहाँ मेरा समाधान है:

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

Answer 13

क्योंकि मुझे एक टिप्पणी पोस्ट करने के लिए पर्याप्त प्रतिष्ठा नहीं है, मैं एक पूर्ण क्रॉस-ब्राउज़र समाधान जोड़ना चाहता हूं जो कुछ मामूली संशोधन के साथ @Madeorsk और @ सादत के दृष्टिकोण को मिलाता है! (क्रोम, फ़ायरफ़ॉक्स, सफारी, IE और एज पर परीक्षण किया गया जैसा कि 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!
} 

हालाँकि, यदि आप मेरे जैसे हैं, तो आप वर्टिकल अलाइनमेंट को भी नियंत्रित करना चाहते हैं, और उन मामलों में, मुझे फ्लेक्सबॉक्स का उपयोग करना पसंद है:

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

Answer 14

मुझे लगता है कि सबसे अच्छा समाधान जावास्क्रिप्ट का उपयोग करना होगा।

लेकिन मुझे यकीन नहीं है कि आपको <td>सेल के बाहर तत्वों की स्थिति की समस्या को हल करने के लिए ऐसा करने की आवश्यकता है । उसके लिए आप कुछ ऐसा कर सकते हैं:

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

पाठ्यक्रम की इनलाइन नहीं, बल्कि कक्षाओं और आईडी के साथ।

Comments

जवाब देने के लिए धन्यवाद। यह काम करता है अगर मुझे मेज के सापेक्ष कुछ रखने की आवश्यकता है । मुझे एक अलग सेल के बाहर कुछ रखने की ज़रूरत है जहाँ सेल का स्थान अज्ञात है।

— जेसन

क्या आप इस तालिका का विस्तार कर सकते हैं? और 100% चौड़ाई / ऊँचाई क्या है?

— पदक विजेता जूल

Answer 15

ऊंचाई बनाने के लिए: आंतरिक div के लिए 100% काम, आपको माता-पिता के लिए एक ऊंचाई निर्धारित करनी होगी। मेरे विशेष मामले के लिए इसने ऊंचाई का उपयोग करके काम किया: 100%। इसने आंतरिक div ऊँचाई को खिंचाव बना दिया, जबकि तालिका के अन्य तत्वों ने td को बहुत बड़ा नहीं होने दिया। आप निश्चित रूप से 100% से अधिक अन्य मूल्यों का उपयोग कर सकते हैं

अगर आप भी टेबल सेल बनाना चाहते हैं, तो एक निश्चित ऊँचाई है ताकि यह कंटेंट के आधार पर बड़ा न हो (इनर डिव स्क्रोल बनाने या ओवरफ्लो को छिपाने के लिए), यह तब है जब आपके पास कोई विकल्प न हो लेकिन कुछ js ट्रिक्स करें। मूल td को एक गैर-सापेक्ष इकाई (% नहीं) में निर्दिष्ट ऊंचाई की आवश्यकता होगी। और आपके पास संभवतः js का उपयोग करके उस ऊंचाई की गणना करने के अलावा कोई विकल्प नहीं होगा। इसके लिए टेबल-लेआउट की भी आवश्यकता होगी: टेबल तत्व के लिए निश्चित शैली सेट

Answer 16

मैं अक्सर समान मुद्दों का सामना करता हूं और हमेशा तत्व और आंतरिक div पर उपयोग table-layout: fixed;करता हूं ।tableheight: 100%;

Answer 17

मुझे अंततः कुछ भी नहीं मिला जो मेरे सभी ब्राउज़रों और सभी डॉकटाइप्स / ब्राउज़र रेंडरिंग मोड्स पर काम करेगा, सिवाय jQuery के उपयोग के। तो यहाँ है क्या मैं के साथ आया था।
यहां तक ​​कि यह रोस्पैन को भी ध्यान में रखता है।

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 + में परीक्षण किया गया। नेस्टेड तालिकाओं के साथ परीक्षण नहीं किया गया।

Comments

ठीक है, अब यह फ्लेक्सबॉक्स के साथ आसान है। यह एक पुराना सवाल है!

— जेसन

@ जेसन धन्यवाद, लेकिन हमें IE10 / IE11 में भी काम करने की आवश्यकता थी, जो दोनों के पास caniuse.com/#feat=flexbox और github.com/philipwalton/lexlexugs के अनुसार आंशिक / छोटी गाड़ी फ्लेक्सबॉक्स का समर्थन है । शायद बाद में ...

— पीटर बी

Answer 18

आप इसे इस तरह से कर सकते हैं:

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

Answer 19

यदि तैनात तत्व और उसके पिता तत्व की चौड़ाई और ऊंचाई नहीं है, तो सेट करें

padding: 0;

इसके पिता तत्व में,

Answer 20

यह शायद अनुशंसित नहीं है।

मुझे लगा कि एक वर्कअराउंड काम करता है, अगर आपके डिव में टेक्स्ट नहीं है और एक समान पृष्ठभूमि है।

display: 'list-item'

div को वांछित ऊँचाई और चौड़ाई देता है, लेकिन एक सूची आइटम बुलेट होने के बड़े नकारात्मक पहलू के साथ। चूंकि div में एक सजातीय पृष्ठभूमि-रंग है, इसलिए मुझे उन शैलियों के साथ गोली से छुटकारा मिला:

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

Answer 21

मुझे यकीन नहीं है कि आप क्या करना चाहते हैं लेकिन आप इसे आज़मा सकते हैं:

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

Answer 22

निम्नलिखित काम करना चाहिए। आपको पैरेंट सेल को एक ऊँचाई सेट करनी होगी। 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>

Answer 23

इसे इस्तेमाल करे:

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

Answer 24

डिस्प्ले लगाने की कोशिश करें: सेल के अंदर टेबल ब्लॉक

Comments

"डिस्प्ले: टेबल ब्लॉक" से आपका क्या मतलब है? कृपया अपने उत्तर को संशोधित और प्रारूपित करने पर विचार करें

— Pmpr

Answer 25

मैं यहां < div > < td > के लिए एक पुरानी सीएसएस-ट्रिक नहीं देखता । इसलिए मैं याद दिलाता हूं: सरल ने चौड़ाई के लिए कुछ न्यूनतम मूल्य निर्धारित किया है , लेकिन न्यूनतम-चौड़ाई के लिए आपको क्या चाहिए । उदाहरण के लिए:

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

टीडी की चौड़ाई, उस स्थिति में, आप पर निर्भर है।

Answer 26

यह एक html में 100% ऊंचाई और 100% चौड़ाई बढ़ाने के लिए मेरा समाधान है <td>

यदि आप अपने कोड में पहली पंक्ति को हटाते हैं, तो आप इसे ठीक कर सकते हैं ...

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

क्योंकि यह सिद्धांत कुछ फ़ाइलों में 100% प्रतिशत का उपयोग करने की अनुमति नहीं देता है <td>, लेकिन यदि आप इस पंक्ति को हटाते हैं, तो शरीर पृष्ठभूमि को 100% ऊँचाई और 100% चौड़ाई तक फैलाने में विफल रहता है, इसलिए मैंने पाया DOCTYPEकि यह समस्या हल करती है

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

यह DOCTYPE आपको आपके शरीर की पृष्ठभूमि को 100% ऊंचाई और 100% चौड़ाई के रूप में विस्तारित करता है, और आपको 100% ऊँचाई और 100% चौड़ाई में ले जाने देता है <td>

Comments

सिद्धांत के साथ खिलवाड़ नहीं करना बेहतर है। आपको सभी परिणामों की जानकारी नहीं है। Doctypes को बदलने के बहुत सारे साइड इफेक्ट्स हो सकते हैं (इसलिए CSS की दुनिया में ज्यादातर चीजें, deplorably)।

— रॉल्फ