पृष्ठ पर केंद्रित दो एचटीएमएल टेबल

Question

मेरे पास एक पृष्ठ पर दो टेबल हैं जो मैं एक तरफ प्रदर्शित करना चाहता हूं, और फिर उन्हें पृष्ठ के भीतर केंद्रित करना (वास्तव में किसी अन्य div के भीतर, लेकिन यह सबसे आसान है जो मैं कर सकता था) के साथ आते हैं:

<style> 
    #outer { text-align: center; } 
    #inner { text-align: left; margin: 0 auto; } 
    .t { float: left; } 
    table { border: 1px solid black; } 
    #clearit { clear: left; } 
</style> 

<div id="outer"> 
    <p>Two tables, side by side, centered together within the page.</p> 

    <div id="inner"> 
    <div class="t"> 
     <table> 
     <tr><th>a</th><th>b</th></tr> 
     <tr><td>1</td><td>2</td></tr> 
     <tr><td>4</td><td>9</td></tr> 
     <tr><td>16</td><td>25</td></tr> 
     </table> 
    </div> 

    <div class="t"> 
     <table> 
     <tr><th>a</th><th>b</th><th>c</th></tr> 
     <tr><td>1</td><td>2</td><td>2</td></tr> 
     <tr><td>3</td><td>5</td><td>15</td></tr> 
     <tr><td>8</td><td>13</td><td>104</td></tr> 
     </table> 
    </div> 

    </div> 
    <div id="clearit">all done.</div> 
</div> 

मैं समझता हूँ कि यह सच है कि टेबल जारी कर रहे हैं के साथ कुछ है, लेकिन मैं एक नुकसान में हूँ के रूप में समझने के लिए मैं क्या याद कर रहा हूँ। ऐसे कई वेब पेज हैं जो यहां दिखाए गए तकनीक की तरह कुछ वर्णन करते हैं, लेकिन किसी भी घटना में यह काम नहीं करता है; बाईं ओर मार्जिन के लिए जिद्दी चिपकने वाली टेबल।

Answer 1

मेरे सिर के ऊपर से, आप # माइनर के बजाय #outer के लिए "मार्जिन: 0 ऑटो" का उपयोग करने का प्रयास कर सकते हैं।

मैं अक्सर अपने डीआईवी में पृष्ठभूमि रंग जोड़ता हूं ताकि यह देखने के लिए कि वे दृश्य पर कैसे बिछा रहे हैं। यहां क्या हो रहा है इसका निदान करने का यह एक अच्छा तरीका हो सकता है।

Answer 2

समस्या यह है कि आपके टेबल को केंद्रित करने वाले डीआईवी की कोई चौड़ाई परिभाषित नहीं है। डिफ़ॉल्ट रूप से, डीआईवी ब्लॉक तत्व होते हैं और अपने माता-पिता की पूरी चौड़ाई लेते हैं - इस मामले में संपूर्ण दस्तावेज़ (#outer DIV के माध्यम से प्रचार), इसलिए स्वचालित मार्जिन शैली का कोई प्रभाव नहीं पड़ता है।

इस तकनीक के लिए काम करने के लिए, आपको केवल उस div की चौड़ाई निर्धारित करना है जिसमें मार्जिन है: ऑटो से कुछ भी "ऑटो" या "वारिस" (या तो एक निश्चित पिक्सेल मान या प्रतिशत)।

Answer 3

अपने आंतरिक div को चौड़ाई दें। अपने सीएसएस

उदाहरण

बदलें:

<style> 
#outer { text-align: center; } 
#inner { text-align: left; margin: 0 auto; } 
.t { float: left; } 
table { border: 1px solid black; } 
#clearit { clear: left; } 
</style> 

इस के लिए

:

<style> 
#outer { text-align: center; } 
#inner { text-align: left; margin: 0 auto; width:500px } 
.t { float: left; } 
table { border: 1px solid black; } 
#clearit { clear: left; } 
</style> 

Answer 4

समस्या यह है कि आप #inner एक सेट देने के लिए width (कुछ भी लेकिन auto या inherit की जरूरत है)। margin: 0 auto; चाल केवल तभी काम करती है जब आंतरिक तत्व इसके कंटेनर तत्व से संकुचित हो। width दिए जाने के बिना, #inner स्वचालित रूप से #outer की पूरी चौड़ाई तक विस्तारित हो रहा है, जिसके कारण इसकी सामग्री को फ्लश किया जा सकता है।

Answer 5

अगर यह मैं था - मैं कुछ इस तरह करना होगा: की तरह टेबल के साथ

<style type="text/css" media="screen"> 
table { border: 1px solid black;float:left;width:148px;} 
#table_container{width:300px;margin:0 auto;} 
</style> 

:

<div id="table_container"> 
    <table> 
    <tr> 
     <th>a</th> 
     <th>b</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>9</td> 
    </tr> 
    <tr> 
     <td>16</td> 
     <td>25</td> 
    </tr> 
    </table> 
    <table> 
    <tr> 
     <th>a</th> 
     <th>b</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>9</td> 
    </tr> 
    <tr> 
     <td>16</td> 
     <td>25</td> 
    </tr> 
    </table> 
</div> 

Answer 6

<style> 
#outer { text-align: center; } 
#inner { width:500px; text-align: left; margin: 0 auto; } 
.t { float: left; width:240px; border: 1px solid black;} 
#clearit { clear: both; } 
</style> 

Answer 7

दुर्भाग्य से, इन समाधानों में से सभी के लिए एक निश्चित चौड़ाई निर्दिष्ट करने पर भरोसा करते हैं । चूंकि टेबल गतिशील रूप से उत्पन्न होते हैं (सांख्यिकीय परिणाम डेटाबेस से खींचे जाते हैं), चौड़ाई अग्रिम में नहीं जानी जा सकती है।

वांछित परिणाम एक और टेबल के भीतर दो तालिकाओं लपेटकर द्वारा प्राप्त किया जा सकता है:

<table align="center"><tr><td> 
//code for table on the left 
</td><td> 
//code for table on the right 
</td></tr></table> 

और नतीजा यह है कि मनमाने ढंग से चौड़ाई और पेज (री) आकार के fluidly प्रतिक्रिया करता तालिकाओं का एक पूरी तरह से केंद्रित जोड़ी है (और align = "center" तालिका विशेषता मार्जिन ऑटो के साथ बाहरी div में बाहर हो सकती है)।

मैं निष्कर्ष निकालता हूं कि कुछ लेआउट हैं जिन्हें केवल टेबल के साथ ही हासिल किया जा सकता है।

Answer 8

मुझे एहसास है कि यह एक प्राचीन प्रश्न है, लेकिन यहां वैसे भी चला जाता है।

निम्नलिखित मानक मोड में (यानी एक डॉक्टरेट सेट के साथ) अनुरूप ब्राउज़र और IE8 में काम करेगा।

#inner {text-align:center;} 
.t {display:inline-block;} 

दुर्भाग्यवश, आईई 6 में काम करने के लिए वास्तव में कोई रास्ता नहीं है। आई 7 के लिए, एक ज़ूम जोड़ना: .t divs (एक सशर्त टिप्पणी के माध्यम से) में मदद कर सकता है, लेकिन मेरे पास इस समय परीक्षण के लिए आईई 7 उपलब्ध नहीं है।