तालिका तालिका को लंबवत रूप से भरने के लिए मैं div कैसे प्राप्त कर सकता हूं?

तालिका कक्ष में पूर्ण स्थिति पर this question पर फ़ॉलोअप के रूप में, मैं फ़ायरफ़ॉक्स में कुछ काम करने की कोशिश कर रहा हूं। एक बार फिर, मैं लगभग 95% हूं, और केवल 1 छोटी चीज है जो मुझे जीत घोषित करने से रोक रही है। अनुवर्ती नमूना मार्कअप का उपयोग करना:तालिका तालिका को लंबवत रूप से भरने के लिए मैं div कैसे प्राप्त कर सकता हूं?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; border-collapse:collapse} 
     th, td { border:1px solid black; vertical-align: top; } 
     th { width:100px; } 
     td { background:#ccc; } 
     .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; } 
     .manage { text-align:right; position:absolute; bottom:0; right:0; } 
     p{ margin: 0 0 5px 0; } 
     </style> 
    </head> 
    <body > 
    <table> 
     <tr> 
       <th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th> 
       <td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
     <tr> 
       <th>Cras diam.</th> 
       <td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
     <tr> 
       <th>Cras diam.</th> 
       <td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
    </table> 
    </body> 
</html>

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

स्रोत

2008-11-14 Chris Marasti-Georg

क्या आप सिर्फ उसी रंग से मेल खाने के लिए बैकग्राउंड प्राप्त करने का प्रयास कर रहे हैं? और संरेखण नहीं, तो आप एक ही प्रभाव देने के लिए सीएसएस में पृष्ठभूमि छवि का उपयोग कर सकते हैं, क्योंकि एफएफ तत्व को कंटेनर के अंदर 100% तक प्रस्तुत नहीं करता है। यदि कंटेनर ऑटो ऊंचाई पर सेट है, तो बच्चा भी ऑटो पर सेट हो जाएगा। प्रतिपादन तेजी से बनाता है।

तो सबसे अच्छा शर्त एक सीएसएस पृष्ठभूमि छवि होगी।

स्रोत

2008-11-14 22:06:08

नहीं, मैं Firefox में सेल की तह तक div प्रबंधन प्राप्त करने की आवश्यकता। पृष्ठभूमि केवल यह दिखाने के लिए हैं कि तत्व कितने बड़े हैं। –

आप (समान) तालिका सेल & रैप div thusly पर निश्चित ऊंचाई डाल सकता है:

<style type="text/css"> 
table { width:500px; border-collapse:collapse} 
th, td { height:200px; border:1px solid black; vertical-align: top; } 
th { width:100px; } 
td { background:#ccc; } 
.wrap { position:relative; height:200px; padding-bottom:1em; background:#aaa; } 
.manage { text-align:right; position:absolute; bottom:0; right:0; } 
p{ margin: 0 0 5px 0; } 
</style>

स्रोत

2008-11-14 22:28:59 da5id

मुझे नहीं पता कि प्रत्येक पंक्ति कितनी लंबी होगी ... मैं लेआउट को लचीला छोड़ना चाहता हूं, ताकि कोशिकाएं उतनी ही लंबी हों जितनी सामग्री की आवश्यकता हो। –

मुझे नहीं लगता कि यह किसी अन्य तरीके से संभव है, तो हो सकता है कि आप PHP का उपयोग करके प्रत्येक पंक्ति में वर्णों की अधिकतम संख्या की गणना करें और फिर पंक्ति ऊंचाई इनलाइन या कुछ सेट करें? – da5id

@ da5id गिनती आपदा के लिए नुस्खा है, क्योंकि उस स्थान पर जहां कोई 10 'i' वर्ण फिट कर सकता है केवल 5 'एम' वर्ण फिट होगा। – ANeves

तालिका तालिका को लंबवत रूप से भरने के लिए मैं div कैसे प्राप्त कर सकता हूं?

उत्तर

संबंधित मुद्दे