सवाल सीएसएस डिस्प्ले टेबल सेल की प्रतिशत चौड़ाई की आवश्यकता है


मुझे एक ऐसी स्थिति में रखा गया है जहां मुझे डिस्प्ले का उपयोग करने की आवश्यकता है: div तत्वों के लिए टेबल-सेल कमांड।

हालांकि मुझे पता चला है कि "कोशिकाएं" केवल तभी सही ढंग से काम करेगी जब चौड़ाई में प्रतिशत जोड़ा जाता है।

इस पहेली में http://jsfiddle.net/NvTdw/ जब मैं प्रतिशत चौड़ाई को हटाता हूं तो कोशिकाओं में समान चौड़ाई नहीं होती है, हालांकि चौड़ाई में प्रतिशत मान जोड़ा जाता है, लेकिन केवल तभी जब वह प्रतिशत divs की अधिकतम संख्या के अनुपात के बराबर होता है, इसलिए चार कॉलम के लिए 25% , पांच 20% और इस मामले में पांच 16.666% पर।

मैंने सोचा कि शायद कम प्रतिशत जोड़ना - कहें कि 1% सभी एक अच्छा फिक्स होगा, लेकिन कोशिकाएं फिर से लाइन से बाहर आती हैं।

ऐसा क्यों है?

    .table {
      display: table;
      height: 200px;
      width: 100%;
    }

    .cell {
      display: table-cell;
      height: 100%;
      padding: 10px;
      width: 16.666%;
    }

    .grey {
      background-color: #666;
      height: 100%;
      text-align: center;
      font-size: 48px;
      color: #fff;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
    }
<div class="table">
  <div class="cell">
    <div class="grey">Block one</div>
  </div>
  <div class="cell">
    <div class="grey">Block two</div>
  </div>
  <div class="cell">
    <div class="grey">Block three</div>
  </div>
</div>
<div class="table">
  <div class="cell">
    <div class="grey">Block</div>
  </div>
  <div class="cell">
    <div class="grey">Block two</div>
  </div>
</div>
<div class="table">
  <div class="cell">
    <div class="grey">Block one</div>
  </div>
  <div class="cell">
    <div class="grey">Block two</div>
  </div>
  <div class="cell">
    <div class="grey">Block three</div>
  </div>
  <div class="cell">
    <div class="grey">Block four</div>
  </div>
</div>
<div class="table">
  <div class="cell">
    <div class="grey">x</div>
  </div>
  <div class="cell">
    <div class="grey">xx</div>
  </div>
  <div class="cell">
    <div class="grey">xxx</div>
  </div>
  <div class="cell">
    <div class="grey">xxxx</div>
  </div>
  <div class="cell">
    <div class="grey">xxxxxx</div>
  </div>
  <div class="cell">
    <div class="grey">Block five test</div>
  </div>
</div>
<div class="table">
  <div class="cell">
    <div class="grey">Block</div>
  </div>
  <div class="cell">
    <div class="grey">Block two</div>
  </div>
  <div class="cell">
    <div class="grey">Block three</div>
  </div>
</div>


55
2017-11-07 11:21


मूल




जवाब:


आपको बस 'टेबल लेआउट: फिक्स्ड;' जोड़ने की जरूरत है

.table {
   display: table;
   height: 100px;
   width: 100%;
   table-layout: fixed;
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp


97
2017-11-07 11:42



धन्यवाद आंद्रे, यह बहुत बेहतर है। प्रतिशत मूल्य स्पष्ट रूप से एक रास्ता है जिसे मुझे नीचे नहीं जाना चाहिए था। मैंने यह भी ध्यान दिया है कि लंबवत-संरेखण जोड़ना: शीर्ष; 'उचित' टेक्स्ट या सामग्री जोड़ते समय सेल क्लास में पैडिंग और मार्जिन के साथ समस्याएं टालती हैं। - UntitledGraphic
दरअसल मुझे टेबल-लेआउट जोड़ने की आवश्यकता नहीं थी: निश्चित, चौड़ाई: 100% समस्या को ठीक करने के लिए पर्याप्त था। - Mike


यह भी ध्यान दें vertical-align:top; सही तालिका सेल उपस्थिति के लिए अक्सर आवश्यक है।

सीएसएस टेबल-सेल, सामग्री में अनावश्यक शीर्ष मार्जिन है


1
2017-07-31 17:19



अच्छा बिंदु, लेकिन एक टिप्पणी होनी चाहिए थी। - isherwood