टीडी के भीतर स्थिति सापेक्ष / निरपेक्ष का उपयोग करना?

Question

मेरे पास निम्नलिखित कोड हैं:

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

यह बिल्कुल काम नहीं करता है। किसी कारण के लिए, स्थिति: रिश्तेदार कमांड को टीडी पर नहीं पढ़ा जा रहा है और मेरे पृष्ठ के निचले भाग पर कंटेंट कंटेनर के बाहर सूचना दी जा रही है। मैंने टीडी की सभी सामग्रियों को एक DIV में डालने की कोशिश की है जैसे:

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

हालाँकि, यह एक नई समस्या पैदा करता है। चूँकि टेबल सेल की सामग्री की ऊँचाई परिवर्तनशील है, इसलिए सूचना DIV हमेशा सेल के नीचे नहीं होती है। यदि एक टेबल सेल 60px मार्कर से आगे बढ़ा है, लेकिन कोई भी अन्य सेल नहीं करता है, तो अन्य कोशिकाओं में, नोटिस DIV 60px नीचे, बजाय नीचे है।

Comments

क्या तालिका का उपयोग करने का कोई कारण है? मैं यह मानकर चल रहा हूं कि बाकी तालिका सामग्री इस सेल की सामग्री को स्थानांतरित करने जा रही है। यदि तालिका आवश्यक है, तो आप दो पंक्तियों का उपयोग कर सकते हैं ऊपर से ऊपर की ओर = ऊपर और नीचे के साथ नीचे की ओर = नीचे

— वेन

यदि आप लेआउट के प्रयोजनों के लिए तालिकाओं का उपयोग कर रहे हैं, तो मैं उसके खिलाफ सलाह दूंगा। डेटा दिखाने के लिए तालिकाओं का उपयोग करना ठीक है, लेकिन वे लेआउट के लिए सर्वश्रेष्ठ नहीं हैं।

— काइल

एक कैलेंडर के लिए ... तो एक टेबल ग्रिड आवश्यक है: 8wayrun.com/events/monthly/1.2011

— जेसन Axelrod

Answer 1

ऐसा इसलिए है क्योंकि CSS 2.1 के अनुसार , position: relativeटेबल तत्वों का प्रभाव अपरिभाषित है। इसके उदाहरण से, position: relativeChrome 13 पर वांछित प्रभाव पड़ता है, लेकिन फ़ायरफ़ॉक्स 4 पर नहीं। आपका समाधान यहां divअपनी सामग्री को जोड़ने और इसके बजाय position: relativeउस पर रखने divका है td। निम्नलिखित आपको position: relative(1) एक divअच्छे पर), (2) a td(कोई अच्छा), और अंत में (3) एक divअंदर td(अच्छा फिर से) के साथ मिलने वाले परिणामों को दिखाता है ।

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>

Comments

Div की ऊंचाई 100% नहीं होगी, इसलिए नीचे की सापेक्ष स्थिति: 0 का कोई प्रभाव नहीं है।

— सॉफ्टलिऑन

ध्यान दें कि इस उदाहरण में "पूर्ण अवधि" td ऊंचाई को प्रभावित नहीं करेगा जो मूल रूप से तालिका के उपयोग को बेकार बनाता है।

— ड्रोर

@Softlion: कैसे के बारे में tdअंदर की पूरी सामग्री लपेटकर div, सेट करने के लिए width: 100%और height: 100%, td से div के लिए जो भी पैडिंग लागू करें, और इसे सेट करें relative? विचार के ऊपर एक पतली युक्त परत बनाने के लिए है td, जो tdखुद की तरह कार्य करता है, लेकिन यह एक है div। इसने मेरे लिए काम किया।

— कैमिलबी

HTML स्रोत के लिए लिंक मर चुका है। क्या आप इसे अपडेट / ताज़ा कर सकते हैं?

— पीटर वरगा

उन लोगों के लिए जो 2019 में या बाद में इसका उत्तर पाते हैं: जबकि CSS2.1 ने वास्तव में कहा था कि position:relativeआंतरिक तालिका भागों पर प्रभाव अपरिभाषित था, इसका मतलब था कि स्वयं तालिका भागों का व्यवहार (उदाहरण के लिए, यह स्पष्ट नहीं था कि tdव्यवहार की सीमाएँ कैसी होनी चाहिए अगर यह के position:relativeमामले में border-collapse:collapse) के माध्यम से स्थानांतरित कर दिया है । यह उन्हें पूरी तरह से तैनात वंश के संभावित ब्लॉक से बाहर नहीं करता था । इसलिए फ़ायरफ़ॉक्स का व्यवहार सिर्फ एक बग बन गया, जो 2014 में तय किया गया था।

— इल्या स्ट्रेल्ट्सिन

Answer 2

यह चाल भी उपयुक्त है, लेकिन इस मामले में संरेखित गुण (मध्य, नीचे आदि) काम नहीं करेंगे।

<td style="display: block; position: relative;">
</td>

Answer 3

टेबल सेल, चर ऊंचाई की सामग्री, 60px से अधिक हो सकती है;

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

Answer 4

अपने दूसरे प्रयास के संबंध में, क्या आपने ऊर्ध्वाधर संरेखण का उपयोग करने का प्रयास किया है? भी

<td valign="bottom">

या सीएसएस के साथ

vertical-align:bottom

Comments

यह काम नहीं करेगा ... अगर मैंने ऐसा किया, तो तालिका सेल की सामग्री को नीचे से 60 पीएक्स तक फैलाया जाएगा; इसके बजाय शीर्ष पर।

— जेसन एक्सल्रॉड

Answer 5

यह भी काम करता है अगर आप "प्रदर्शन: ब्लॉक;" td पर, td पहचान को नष्ट करना, लेकिन काम करता है!