मैं एक HTML तालिका को उसी चौड़ाई के रूप में कैसे बना सकता हूं जिसमें div टैग है?

मेरे पास एक div के अंदर एक टेबल है। मैं चाहता हूं कि तालिका div टैग की पूरी चौड़ाई पर कब्जा करे।मैं एक HTML तालिका को उसी चौड़ाई के रूप में कैसे बना सकता हूं जिसमें div टैग है?

सीएसएस में, मैंने तालिका की चौड़ाई 100% निर्धारित की है। दुर्भाग्यवश, जब div पर कुछ मार्जिन होता है, तो तालिका में div की तुलना में व्यापक होता है।

मुझे आईई 6 और आईई 7 का समर्थन करने की आवश्यकता है (क्योंकि यह एक आंतरिक ऐप है), हालांकि मैं स्पष्ट रूप से पूरी तरह से पसंद करूंगा यदि संभव हो तो क्रॉस-ब्राउज़र समाधान!

मैं निम्नलिखित DOCTYPE उपयोग कर रहा हूँ ...

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

संपादित: दुर्भाग्य से मैं यह कर सकते हैं हार्ड-कोड नहीं चौड़ाई के रूप में मैं प्रभावी ढंग से HTML पैदा कर रहा हूँ और यह नेस्टिंग शामिल divs एक दूसरे के अंदर recursively (प्रत्येक div पर बाएं मार्जिन के साथ, यह एक अच्छा 'घोंसला' प्रभाव बनाता है)।

स्रोत

2008-09-16 Chris Roberts

फ़ायरफ़ॉक्स और आईई 7 में मेरे लिए निम्नलिखित काम करता है ... एक दिशानिर्देश, हालांकि है: यदि आप किसी तत्व पर चौड़ाई निर्धारित करते हैं, तो उसी तत्व पर मार्जिन या पैडिंग सेट न करें। यह विशेष रूप से है यदि आप इकाइयों को मिश्रण कर रहे हैं - कहते हैं, पर्सेंट और पिक्सेल मिश्रण।

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

<html> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div style="width: 500px; background-color:#F33;"> 
     This is the outer div 
     <div style="background-color: #FAA; padding: 10px; margin:10px;"> 
     This is the inner div 
     <table cellpadding="0" cellspacing="0" style="width: 100%"> 
      <tr> 
      <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </body> 
</html>

उदाहरण के लिए here देखें।

स्रोत

2008-09-16 17:18:24 Nate

चौड़ाई और एक ही तत्व पर मार्जिन सेट करने के लिए नहीं कह बाद, आप अपने उदाहरण div के लिए बिल्कुल ऐसा। बस उत्सुक क्यों? – Kane

आप सही हैं। मुझे याद नहीं है! शायद मैं मार्कअप का पालन करना चाहता था, मैंने सोचा था कि ओपी का उपयोग कर रहा था? मैं संपादित करूंगा। – Nate

इस मामले में जहां आप स्वचालित रूप से कोड उत्पन्न कर रहे हैं, उस पर मार्जिन हो सकता है, एक सरल, अस्थिर <div> आपकी तालिका को लपेटने वाला तत्व चाल कर सकता है।

स्रोत

2008-09-16 17:26:59 Nate

सीएसएस जिस तरह से चौड़ाई की संपत्ति का इलाज करता है और माइक्रोसॉफ्ट द्वारा पहले बॉक्स मॉडल को अलग-अलग तरीके से लागू करने की वजह से बड़ी समस्या है। माइक्रोसॉफ्ट खो गया, और अब यह किसी तत्व के लिए चौड़ाई या मार्जिन/पैडिंग/सीमा है।

स्थिति box-sizing property

स्रोत

2008-09-16 17:39:19

साथ CSS3 में बेहतर करने के लिए बदल सकता है मैं हमेशा <table width="100%">

स्रोत

2008-09-16 17:57:17

दाएं। इट्स दैट ईजी। बस '# my-parent-div तालिका {मार्जिन: 100%;} 'जैसे सीएसएस का उपयोग करें –

का उपयोग किया है हो सकता है कि इस व्यापक लेख के बारे में Internet Explorer and the CSS box model में मदद मिलेगी?

स्रोत

2008-09-16 18:18:17

इस प्रयास करें:

div { 
padding: 0px; 
} 

table { 
    width: 100%; 
    margin: 0px; 
}

शून्य करने के लिए div की गद्दी की स्थापना करके, आप div की सीमाओं और इसके बारे में सामग्री के बीच की जगह को हटा देगा। तालिका की चौड़ाई को 100% तक सेट करके और शून्य से मार्जिन सेट करके, आप तालिका की सीमाओं और उसके कंटेनर के बीच की जगह निकाल देंगे।

स्रोत

2008-09-16 19:53:57 farzad

प्रतिशत-आधारित चौड़ाई पहले पैरेंट तत्व से संबंधित है जिसमें चौड़ाई निर्दिष्ट है। यदि आपके div में चौड़ाई निर्दिष्ट नहीं है तो तालिका की चौड़ाई के साथ इसके साथ कुछ लेना देना नहीं है। क्या आप मार्कअप का सरलीकृत संस्करण पोस्ट कर सकते हैं जो दिखाता है कि आपका डोम पेड़ कैसा दिखता है?

किसी अन्य कोण से, यदि आपके मूल div के पास चौड़ाई सेट है और मार्जिन अभी भी आपकी तालिका को प्रभावित कर रहा है तो आप शायद क्विर्क मोड में हैं। आपने अपना डॉक्टरेट निर्दिष्ट किया है, लेकिन ध्यान रखें कि DOCTYPE तत्व फ़ाइल में पहली पंक्ति होनी चाहिए।आईई 6 से निपटने पर ध्यान देने योग्य कुछ और, डिफ़ॉल्ट रूप से, यदि आपकी सामग्री आपके माता-पिता से व्यापक है, तो माता-पिता को समायोजित करने के लिए बढ़ाया जाएगा, आप अतिप्रवाह जोड़कर इसे रोक सकते हैं: मूल तत्व के लिए अपने सीएसएस पर छिपा हुआ है लेकिन प्रक्रिया में कुछ बच्चे तत्व की सामग्री अस्पष्ट हो सकता है।

स्रोत

2008-09-16 20:17:52

वास्तव में यह सुनिश्चित नहीं है कि समस्या क्या है - यह आईई 6/7 और एफएफ 3 में ठीक काम करता है। .container DIV तत्व की चौड़ाई सेट करना तालिका की चौड़ाई सेट करता है। .container div में मार्जिन जोड़ना तालिका को प्रभावित नहीं करता है। शायद आपके मार्कअप/सीएसएस में कुछ और है जो लेआउट को प्रभावित कर रहा है?

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

<html> 
    <head> 
     <title>Boxes and Tables</title> 
     <style type="text/css"> 

     div.container { 
      background-color: yellow; 
      border: 1px solid #000; 
      width: 500px; 
      margin: 5px auto; 
     } 

     table.contained { 
      width: 100%; 
      border-collapse: collapse; 
     } 

     table td { 
      border: 2px solid #999; 
     } 

     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <table class="contained"> 
       <thead> 
        <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr> 
       </thead> 
       <tbody> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
        <tr><td>Value</td><td>Value</td><td>Value</td></tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

स्रोत

2008-09-17 15:44:14

संयोग से, क्या आपके लिए सख्त सिद्धांत का उपयोग न करने का कोई अच्छा कारण है? सख्त हमेशा डिफ़ॉल्ट होना चाहिए। संक्रमणकालीन केवल विरासत कोड के लिए है।

स्रोत

2008-09-17 15:48:06

मुझे यहां समस्या का दिल पता चला। इसे सीमा-पतन के साथ करना है। मुझे थोड़ी देर के लिए यह वही समस्या है। चूंकि तालिकाओं में अक्सर पतली सीमाएं होती हैं, इसलिए ज्यादातर लोगों के लिए समस्या स्पष्ट नहीं होती है। यदि आप एक डीवी के अंदर चौड़ाई सेट के साथ 100% तक नियमित टेबल डालते हैं, जैसा नाट है, तो आप ठीक होंगे।

हालांकि, यदि आप सीमा-पतन निर्दिष्ट करते हैं: तालिका पर पतन, तालिका div से बाहर हो जाएगी। यह ज्यादातर लोगों के लिए स्पष्ट नहीं है क्योंकि यह केवल एक पिक्सेल से टूट सकता है, या उस संदर्भ के आधार पर और उपयोगकर्ता एजेंट, शायद बिलकुल नहीं।

यह स्पष्ट करने के लिए कि क्या हो रहा है, इसे आज़माएं: डेविड हेगी के उदाहरण के बाद नेट फ़ाइल को एक HTML फ़ाइल में रखें।

यह दोनों ठीक काम की तरह दिखेगा। लेकिन अब, नेट की इनलाइन टीडी शैली को "सीमा: 40 पीएक्स ठोस नीला" में बदलें। डेविड की टेबल टीडी शैली को "सीमा: 40 पीएक्स ठोस # 999;" में बदलें। इस बिंदु पर, डेविड की मेज प्रत्येक तरफ 50% सीमा से div से बाहर हो जाती है। नाट अभी भी काम करता है। एक सीमा-पतन डालें: नाट की मेज पर पतन शैली और उसके ब्रेक अब भी।

यह सीमा-पतन है जो इसे पैदा कर रहा है!

स्रोत

2009-03-16 14:53:25 Chris

निम्नलिखित कोड IE6/8, क्रोम, फायरफॉक्स, सफारी पर काम करता है:

<style type="text/css"> 
    div.container 
    { 
     width: 500px; 
     padding: 10px; 
     margin: 10px; 
     border: 1px solid red; 
    } 
    table.contained 
    { 
     width: 100%; 
     border: 1px solid blue; 
    } 
</style> 

<div class="container"> 
    <table class="contained"> 
    <tr> 
     <td>Hello</td><td>World</td> 
    </tr> 
    </table> 
</div>

कोशिश कॉपी और पेस्ट करें और उसके आधार पर आगे (बस हैडर करने के लिए या एक अलग .css फाइल करने के लिए शैली हिस्सा ले जाते हैं), हो सकता है कि आप सीएसएस इनलाइन डालने का तरीका (स्टाइल टैग का उपयोग करके) में समस्या के साथ कुछ करना है, या यह div table ब्लॉक के आस-पास कुछ अन्य सीएसएस है? फ़्लोटिंग परेशानी भी दे सकती है।

पीएस मैंने लाल और नीली सीमाओं को सेट करने के लिए सेट किया है ताकि क्षेत्र अधिक दृश्य जांच के लिए कहां विस्तार कर सकें।

स्रोत

2010-10-11 16:36:16 Nestor

अतिप्रवाह: ऑटो; बाहरी भाग पर यदि आप अजीब चीज़ों को देख रहे हैं तो मदद कर सकते हैं - जैसे कि बाहरीतम div आप जितना छोटा हो या उससे अंदर के divs के पूरे आकार को नहीं लेना चाहिए।

स्रोत

2012-10-16 03:36:41 William

अपने <table> लिए नीचे दिए गए सीएसएस जोड़ें:

table-layout: fixed; 
width: 100%;

स्रोत

2015-02-20 05:58:56

मैं एक HTML तालिका को उसी चौड़ाई के रूप में कैसे बना सकता हूं जिसमें div टैग है?

उत्तर

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