सीएसएस प्रदर्शन: चौड़ाई 100% पर सेट होने पर तालिका-पंक्ति का विस्तार नहीं होता है

Question

मुझे थोड़ी परेशानी हो रही है। मैं फ़ायरफ़ॉक्स 3.6 का उपयोग कर रहा हूं और निम्नलिखित डोम संरचना है:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

और निम्नलिखित सीएसएस:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

अगर मैं इसे हटाता हूं तो display:table-rowयह view-row100% की चौड़ाई के साथ सही ढंग से दिखाई देगा । अगर मैं इसे वापस डालता हूं तो यह सिकुड़ जाता है। मैंने इसे JS बिन पर रखा है:

http://jsbin.com/ifiyo

क्या चल रहा है?

Answer 1

यदि आप display:table-rowआदि का उपयोग कर रहे हैं , तो आपको उचित मार्कअप की आवश्यकता है, जिसमें एक तालिका शामिल है। इसके बिना आपका मूल प्रश्न मूल रूप से इसके बराबर खराब मार्कअप प्रदान करता है:

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

उपरोक्त तालिका कहाँ है? तुम बस कहीं से एक पंक्ति नहीं हो सकता (टीआर या तो में समाहित किया जाना चाहिए table, thead, tbody, आदि)

इसके बजाय, एक बाहरी तत्व के साथ जोड़ें display:table, युक्त तत्व पर 100% चौड़ाई डालें। दो सेल अंदर स्वचालित रूप से 50/50 पर जाएंगे और दूसरी सेल पर टेक्स्ट को सही से संरेखित करेंगे। floatsतालिका तत्वों के साथ भूल जाओ । यह बहुत सारे सिरदर्द पैदा करेगा।

मार्कअप:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

सीएसएस:

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}

Comments

+5 लानत-मलानत से छुटकारा पाने पर!

— 20:13

-1 क्योंकि स्पष्टीकरण सिर्फ गलत है। CSS2.1 चश्मा के अनुसार , प्रश्न में मार्कअप / CSS काम करने वाला है।

— user123444555621

किसी भी ब्राउज़र में गायब तालिका के साथ कोई समस्या नहीं है (फ़ायरफ़ॉक्स 3.0 था ...) वास्तविक समस्या यह है कि तालिका पंक्तियों पर चौड़ाई सेटिंग्स को पूरी तरह से अनदेखा किया जाता है । (जिसका अर्थ है कि प्रश्न में मार्कअप / सीएसएस वास्तव में अपेक्षित रूप से काम नहीं करता है, इसलिए ऊपर मेरी टिप्पणी गलत थी;))

— user123444555621

यह उत्तर गलत है। पूछने वाले का मार्कअप सही है। जैसा कि Pumbaa80 कहता है, मुद्दा यह मानने के साथ है कि चौड़ाई तालिका स्तर के बजाय पंक्ति स्तर पर होनी चाहिए। चौड़ाई की व्याख्या केवल तालिका स्तर पर की जाती है। पंक्तियों को पूरी तरह से छोड़ा जा सकता है। नीचे मेरा पूरा जवाब देखें।

— अमीन एरियाना

मैं उस उत्तर पर टिप्पणी नहीं कर रहा था जो काम करता है। मैं आपकी टिप्पणी पर टिप्पणी कर रहा था कि आपको सीएसएस में एक तालिका पंक्ति शामिल करनी चाहिए। तुम नहीं। कुछ कहने के लिए छद्म मान्य है क्योंकि आपकी व्यक्तिगत मान्यताएँ कहने के लिए बहुत ही हठधर्मिता / कठोर बात है; खासकर जब सीएसएस पूरी तरह से वैध था।

— बिल रोसमस

Answer 2

परीक्षण किया गया उत्तर:

.View-पंक्ति css में, परिवर्तन करें:

display:table-row;

सेवा:

display:table

और "फ्लोट" से छुटकारा पाएं । सब कुछ उम्मीद के मुताबिक काम करेगा।

जैसा कि टिप्पणियों में बताया गया है, रैपिंग टेबल की कोई आवश्यकता नहीं है। सीएसएस पेड़ संरचना के स्तरों को छोड़ने की अनुमति देता है (इस मामले में पंक्तियाँ) जो निहित हैं। आपके कोड के काम न करने का कारण यह है कि "चौड़ाई" की व्याख्या केवल तालिका स्तर पर की जा सकती है, तालिका-पंक्ति स्तर पर नहीं। जब आपके पास एक "टेबल" और फिर "टेबल-सेल" सीधे नीचे होती है, तो उन्हें एक पंक्ति में बैठने के रूप में व्याख्या की जाती है।

काम करने का उदाहरण:

<div class="view">
    <div>Type</div>
    <div>Name</div>                
</div>

सीएसएस के साथ:

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

.view > div {
  width:50%;
  display: table-cell;
}

Comments

आपके उत्तर से सीएसएस समकक्ष का पता चलता है <table><td></td></table>जिसके आधार पर W3C के अनुसार अवैध HTML मार्कअप होगा। हालांकि यह मान्य होगा, आप इस मार्कअप की नकल करने के लिए ब्राउज़र को बताने का सुझाव क्यों देंगे?

— के.पी.

यह सीएसएस नियमों द्वारा सही है: w3.org/TR/CSS2/tables.html#anonymous-boxes । कोड की अनावश्यक पंक्तियों को हटाकर बनाए रखना आसान है (उदाहरण के लिए, केपी द्वारा सुझाए गए अनावश्यक <दृश्य-पंक्ति> div)। इससे मुझे मदद मिली ... मैं इसका उपयोग कर रहा हूं। +1

— बिल रोसमस

क्या यह सिर्फ फ्लोट स्टेटमेंट से छुटकारा पाने के लिए पर्याप्त नहीं होगा? .View div इसे प्रदर्शित कर सकता है: तालिका-पंक्ति गुण।

— आइडोग्राम

यह अच्छा है, ~~ लेकिन IE9 पर काम नहीं करता है जहाँ तक मैं बता सकता हूँ। ~~ मैं गलत हूँ। यह बहुत अच्छा है! :)

— f1lt3r

जब आप 1 से अधिक पंक्ति रखते हैं, तो बेशक प्रदर्शन: टेबल का कोई फायदा नहीं होता है। वे सभी बुरी तरह से

— अलंकृत

Answer 3

ध्यान दें कि CSS3 कल्पना के अनुसार, आपको अपने लेआउट को तालिका-शैली तत्व में लपेटने की आवश्यकता नहीं है। यदि वे मौजूद नहीं हैं तो ब्राउज़र तत्वों के अस्तित्व का अनुमान लगाएगा।

Comments

बहुत ही सीएसएस 2.1 , धारा 17.2.1, शीर्ष 3.2 में निर्दिष्ट किया गया है । नीचे HBOX / VBOX उदाहरण बिल्कुल सवाल में मामला है। तो ब्राउज़र की तरह लग रहा है बस परवाह नहीं है।

— user123444555621

Answer 4

.view-typeकक्षा पर दे दो float:left;या हटा दोfloat:right; की.view-name

संपादित करें: अपने div लपेटें<div class="view-row"> उदाहरण के लिए एक और div के साथ<div class="table">

और निम्नलिखित सीएसएस सेट करें:

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

आपको सही परिणामों के लिए तालिका संरचना का उपयोग करना होगा।

Comments

मैंने ff3.6, यानी 8, क्रोम, ओपेरा के साथ परीक्षण किया। आप इसे यहाँ देख सकते हैं jsbin.com/ifiyo/4 वे उन्हें कंधे से कंधा मिलाकर दिखाते हैं

— Sotiris

मैं दूर दाईं ओर नाम रखना चाह रहा था, बाईं ओर टाइप ... यदि आप एक प्रदर्शन करते हैं: दोनों पर इनलाइन करें और प्रदर्शन को बाहर निकालें: तालिका-पंक्ति यह काम करती है, मैं सोच रहा था कि एक बेहतर तरीका हो सकता है तालिका-पंक्ति / सेल गुणों का उपयोग करके इसे करें।

— मौका

Answer 5

आप टेबल-सेल को सीधे टेबल के भीतर घोंसला बना सकते हैं। आपके पास एक मेज है। ईथ टेबल-पंक्ति शुरू करने से काम नहीं चलता। इसे इस HTML के साथ आज़माएँ:

<html>
  <head>
    <style type="text/css">
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
  width: 100%;
}
.td {
  display: table-cell;
}
    </style>
  </head>
  <body>

    <div class="table">
      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>
    </div>

      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>

    <div class="table">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
    </div>

  </body>
</html>