सीएसएस टेबल-सेल बराबर चौड़ाई

Question

मेरे पास एक टेबल कंटेनर के अंदर टेबल-सेल तत्वों की एक अनिश्चित संख्या है।

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

क्या टेबल-कोशिकाओं को समान चौड़ाई प्राप्त करने का शुद्ध सीएसएस तरीका है, भले ही उनके भीतर अलग-अलग आकार की सामग्री हो?

धन्यवाद।

संपादित करें: अधिकतम-चौड़ाई होने से आपको यह पता चलेगा कि आपके पास कितने सेल हैं?

Comments

कॉलम की संख्या कैसे निर्धारित की जाती है: क्लाइंट या सर्वर साइड?

— १:१२ बजे ambriansreed

कुछ तरीकों की कोशिश करने के बाद, मुझे लगता है कि अगर आप कई पंक्तियाँ चाहते हैं और उन्हें समान चौड़ाई की चाहत है, तो टेबल के बजाय फ्लेक्सबॉक्स का उपयोग करें

— Eric

Answer 1

यहाँ कोशिकाओं की अनिश्चित संख्या के साथ एक कामकाजी फ़िदा है: http://jsfiddle.net/r9yrM/1/

आप प्रत्येक माता-पिता div( तालिका ) के लिए एक चौड़ाई तय कर सकते हैं , अन्यथा यह हमेशा की तरह 100% होगा।

चाल का उपयोग करने के लिए table-layout: fixed;और प्रत्येक सेल पर कुछ चौड़ाई है इसे ट्रिगर करने के लिए, यहां 2%। वह अन्य तालिका algorightm को ट्रिगर करेगा , वह जहां ब्राउज़र संकेतित आयामों का सम्मान करने के लिए बहुत प्रयास करता है।
कृपया Chrome (और IE8- यदि आवश्यक हो) के साथ परीक्षण करें। यह हाल की सफारी के साथ ठीक है, लेकिन मैं उनके साथ इस चाल की संगतता को याद नहीं कर सकता।

सीएसएस (प्रासंगिक निर्देश):

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013): OS X पर Safari 6 से सावधान रहें, यह table-layout: fixed; गलत है (या शायद अलग-अलग, अन्य ब्राउज़र से बहुत अलग है। मैंने CSS2.1 REC टेबल लेआउट;) का प्रमाण नहीं पढ़ा। विभिन्न परिणामों के लिए तैयार रहें।

Comments

धन्यवाद, यह उत्तर की तरह लगता है। मैं नहीं जानता कि क्यों लेकिन अगर मैं 2% की चौड़ाई निर्धारित करता हूं तो यह वास्तव में प्रत्येक कॉलम को 2% तक बढ़ा देता है। लेकिन 100% महान काम करने लगता है। किसी भी विचार वहाँ क्या हो रहा है?

— हैरी

मैं टेबल-कोशिकाओं पर 100% चौड़ाई का उपयोग करने की आवश्यकता के एक ही मुद्दे में भाग गया। प्रदर्शन: तालिका के साथ मूल तत्व पर लागू होने वाले एक स्पष्ट उपप्रकार के कारण ऐसा हो रहा था। चूंकि IE8 में 100% चौड़ाई वाली कोशिकाएँ काम नहीं करती हैं, इसलिए मेरे लिए फिक्स क्लीयरफिक्स को हटाना था। उम्मीद है कि यह किसी की मदद करता है।

— एलेक्स बैरेट ने

इस पर विस्तार करने के लिए, यह सरल लेआउट (1x1, 2x2, 3x3, आदि) के लिए काम करता है, लेकिन जटिल लेआउट (1x3x1, 1x2x3x4, आदि) को अतिरिक्त divs के साथ display:tableउपयोग करने की आवश्यकता होती है जैसे कि वे पंक्तियाँ थीं, display:tabl-rowजैसा कि कुछ उम्मीद नहीं कर सकते हैं। यहाँ उदाहरण है ।

— filoxo

100% चौड़ाई IE8 (आश्चर्य) पर काम नहीं किया लेकिन 2% के लिए प्रारंभिक सुझाव सही परिणाम प्रदान करता है।

IE10 में 100% चौड़ाई भी काम नहीं की। यह किया IE11 में काम करते हैं। और 1% चौड़ाई ने मोबाइल सफारी को सुपर संकीर्ण कॉलम दिखाया। इसलिए मैंने IE9 और IE10 को सीएसएस हैक लक्ष्यीकरण का उपयोग करके समाप्त किया: .my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } }सीएसएस हैक यहाँ से है: stackoverflow.com/a/24321386/6962

— हेनरिक एन

Answer 2

एचटीएमएल

<div class="table">
    <div class="table_cell">Cell-1</div>
    <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
    <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
    <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>​

सीएसएस

.table{
    display:table;
    width:100%;
    table-layout:fixed;
}
.table_cell{
    display:table-cell;
    width:100px;
    border:solid black 1px;
}

डेमो।

Comments

फ़िडल यहां काम नहीं करता है। कोशिकाएं हमेशा 25% होती हैं।

— netAction

यह समाधान कुछ भी गतिशील के लिए बहुत स्केलेबल नहीं है, जैसे कि क्लाइंट द्वारा नियंत्रित साइट नेविगेशन।

— एरिक के

संभवतः आप सही हैं और btw, यह लगभग दो साल पुराना anser @QuantumDynamix है। मन पर कुछ अच्छा है? क्यों न अपने विचार को साझा करें, दुनिया को बेहतर चीजें बताएं :-)

— अल्फा

Answer 3

मेरे लिए काम max-width: 0करने वाले display: table-cellतत्व का उपयोग करना:

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}

<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>

Comments

यहां सिर्फ नाइटपैकिंग है, लेकिन 0pxएक वैध इकाई नहीं है। यह सिर्फ होना चाहिए 0।

— गैविन

इसने मेरे लिए काम किया, लेकिन क्या आप बता सकते हैं कि यह कैसे काम करता है?

— इमैनुअल

Answer 4

बदलने के

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

साथ में

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

टेबल बनाने की तरह प्रदर्शन करने की कोशिश कर रहे आसपास के सभी मुद्दों को देखें। उन्हें टेबल लेआउट की नकल करने के लिए टेबल-एक्सएक्सएक्स को जोड़ना पड़ा

टेबल्स समर्थित हैं और सभी ब्राउज़रों में बहुत अच्छी तरह से काम करते हैं। उन्हें क्यों खाई? तथ्य यह है कि वे उन्हें नकल करने के लिए था सबूत है कि उन्होंने अपना काम किया और अच्छा किया।

मेरी राय में, नौकरी के लिए सबसे अच्छा उपकरण का उपयोग करें और यदि आप सारणीबद्ध डेटा या ऐसा कुछ चाहते हैं जो सारणीबद्ध डेटा तालिकाओं से मिलता जुलता है।

बहुत देर से जवाब मुझे पता है, लेकिन आवाज देने लायक।

Comments

+1 क्योंकि यह काम करता है और क्योंकि 2014 में CSS अभी भी सभी ब्राउज़रों में सही ढंग से नहीं करता है।

— युक

कभी-कभी आप उन चीज़ों के लिए तालिका जैसा लेआउट चाहते हैं, जो सारणीबद्ध डेटा नहीं हैं। जो का उपयोग करना चाहिए जैसे नेविगेशन तत्वों <nav>, <ul>आदि

— बेन

उत्तरदायी के लिए यह एक div आधारित लेआउट के लिए आदर्श है। मोबाइल उपकरणों में टेबल प्रदर्शित करना गधे में दर्द है।

— पाब्लो

एक तालिका का अनुकरण करने की कोशिश उत्तरदायी डिजाइन को रोकता है। यदि आप उत्तरदायी डिजाइन चाहते हैं तो मैं सहमत हूं, तालिकाओं का विकल्प नहीं है।

— DeveloperChris

सारणीबद्ध डेटा प्रदर्शित करने के लिए तालिकाओं का निर्माण किया गया था: यह था, यह है और सारणीबद्ध डेटा प्रदर्शित करने के लिए इसका उपयोग करने के लिए HTML तत्व होंगे, कोई भी उन्हें (उस उद्देश्य के लिए) क्यों खोदेगा? टेबल लेआउट की नकल नहीं की गई है: यह थोड़ी देर के लिए CSS2 की सिफारिश का हिस्सा रहा है और ऐसा होता है कि HTML तालिकाओं का डिफ़ॉल्ट लेआउट display: table-etc(स्वाभाविक रूप से) है। मैं अपने दिन बिताते हुए लिंक बनाने या divs mimicking टेबल, स्पैन या इनपुट बनाने में खर्च नहीं करता: मैं सिर्फ स्टाइल के लिए CSS का उपयोग कर रहा हूं। अंत में, displayटेबल, ट्र, टीडी तत्वों के लिए संपत्ति के किसी अन्य मूल्य को लागू करने के लिए IE9 के साथ शुभकामनाएं ।

— फेलिपएल्स

Answer 5

यह सभी के लिए काम करेगा

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

यह पुनरावृत्ति द्वारा बनाए गए तालिका डेटा के लिए भी काम करेगा

Answer 6

हेयर यू गो:

http://jsfiddle.net/damsarabi/gwAdA/

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

Answer 7

यह टेबल-सेल स्टाइल को सेट करके width: auto, और सामग्री को खाली करके किया जा सकता है । कॉलम अब बराबर-चौड़े हैं, लेकिन कोई सामग्री नहीं है।

सेल में सामग्री डालने के लिए, divcss के साथ जोड़ें :

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

आपको position: relativeकोशिकाओं में जोड़ने की भी आवश्यकता है ।

अब आप वास्तविक सामग्री को ऊपर दी गई बात में लगा सकते हैं।

https://jsfiddle.net/vensdvvb/