मेक प्रदर्शन तालिका सेल उपयोग प्रतिशत चौड़ाई

Question

Fiddle

मैं इस तालिका जा रहा लग रहा है, एक बिना क्रम वाली सूची का उपयोग कर मिल गया है। लेकिन मैं यह नहीं समझ सकता कि टेबल-सेल्स को 50% चौड़ाई प्राप्त करने के लिए कैसे प्राप्त करें (मैं चाहता हूं कि प्रत्येक पंक्ति 100% चौड़ाई हो)। कारण मैं display: table-row; और display: table-cell; का उपयोग कर रहा हूं, इसलिए पैरामीटर टेक्स्ट एक से अधिक पंक्ति होने पर मैं डेटा को लंबवत-संरेखित कर सकता हूं। मैं चौड़ाई के लिए वास्तविक पिक्सेल या एम मान का उपयोग नहीं करना चाहता, क्योंकि, ठीक है, अगर मैं इसे संभवतः प्रतिशत में चाहता हूं। मैं लंबवत-संरेखण छोड़ दूंगा। कृपया कोई जावास्क्रिप्ट नहीं है। धन्यवाद!

HTML:

<div class="group group2"> 
    <h2>Health Indicies</h2> 
    <ul> 
     <li><p class="parameter">GGP</p><p class="data">265</p></li> 
     <li><p class="parameter">Comfort</p><p class="data">blah</p></li> 
     <li><p class="parameter">Energy</p><p class="data">gooo</p></li> 
    </ul> 
</div> 

सीएसएस:

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.group { 
    width: 50%; 
    margin-bottom: 20px; 
    outline: 1px solid black; 
    background: white; 
    box-shadow: 1px 1px 5px 0px gray; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.group h2 { 
    display: block; 
    font-size: 14px; 
    background: gray; 
    text-align: center; 
    padding: 5px; 
} 
.group li { 
    clear: both; 
} 
.group p { 
    padding: 3%; 
    text-align: center; 
    font-size: 14px; 
} 
.group2 li { 
    display: table-row; 
} 
.group2 p { 
    display: table-cell; 
    vertical-align: middle; 
    width: 46%; 
    border-bottom: 2px solid gray; 
} 
.group li:last-child p { 
    border-bottom: 0; 
} 

Answer 1

आप बहुत करीब हैं। आपको बस display: table और width: 100% को अपने ul.group2 में जोड़ने की आवश्यकता है। आप शायद width को अपने .group2 p तत्वों पर आपूर्ति न करने से भी दूर हो सकते हैं।

यह काम करना चाहिए: http://jsfiddle.net/6Kn88/2/

Answer 2

अपने सीएसएस के बाकी के अनुसार display: table को ul सेट करें, और यह 100% की चौड़ाई माता पिता div को भरने के लिए दे। अब आपकी चौड़ाई आपकी "पंक्तियों" और "कोशिकाओं" के लिए होनी चाहिए।

संपादित करें: उपरोक्त केपैट के अनुसार, जो निशान से जल्दी था!

Answer 3

मुझे बूटस्ट्रैप स्रोत कोड से टेबल-सेल div 100% चौड़ाई सेट करने का सबसे अच्छा तरीका मिला।

width:10000px सेट करें, यह 100% चौड़ाई की तरह प्रस्तुत किया गया है।

https://jsfiddle.net/y3qsxb9m/

Answer 4

display: table-cell; 

की स्थापना

width:10000px; 

width:100%; 

के रूप में काम के लिए

तो, आप चौड़ाई का 50% चाहते हैं, बस का उपयोग

width: 5000px;