6
क्या कोई बता सकता है कि नीचे दो टेबल लेआउट समान क्यों नहीं हैं (विशेष रूप से, दूसरा 'टेबल-सेल' div 'टेबल' पैरेंट div की बाकी चौड़ाई को लेने के लिए क्यों नहीं फैलाता है, क्योंकि यह असली टेबल में करता है)?टेबल-सेल स्टाइल तत्व बिना टेबल/टेबल-पंक्ति स्टाइल पैरेंट की शेष चौड़ाई को भरने के लिए स्पष्ट चौड़ाई के बिना क्यों नहीं करता है?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div style="width: 100%; border: 1px solid black;">
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
<div style="display: table-cell; border: 1px solid red;">.</div>
<div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div>
</div>
<table style="width: 100%; border: 1px solid black; border-spacing: 0;">
<tr>
<td style="width: 20px; border: 1px solid red;">.</td>
<td style="border: 1px solid red;">.</td>
<td style="width: 20px; border: 1px solid red;">.</td>
</tr>
</table>
</body>
</html>
संपादित करें: पता चला है कि आप कुछ अनपेक्षित व्यवहार मिलता है अगर आप एक मेज सेल के रूप में एक छवि कोशिश करते हैं और शैली:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css"><![CDATA[
* {border: 1px solid black;}
table, .table, .row {
width: 100%;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
img {
height: 21px;
width: 21px;
}
]]></style>
</head>
<body>
<div class="table">
<div class="row">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
<div class="cell">
</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" />
</div>
</div>
</body>
</html>
2 सेल स्टाइल div क्षैतिज सभी तरह खिंचाव नहीं है तालिका की चौड़ाई को भरने के लिए। यदि आप इसमें सामग्री जोड़ते हैं, तो यह धीरे-धीरे करता है। अजीब।
क्योंकि आपने अपने माता-पिता को 'डिस्प्ले: टेबल' नियम नहीं दिया है? – j08691
इस परीक्षण मामले में सच है, ओह! मैं वास्तविक स्रोत के साथ अपने स्रोत को सरल बना रहा था और ऐसा लगता है कि मैंने अनजाने में उस नियम को हटा दिया और परिणामस्वरूप समस्या कोड को ओवरम्प्लीफाइंग कर दिया! इस मुद्दे के एक अद्यतन डेमो पर काम करना ... – Dave
हाँ, छवियां टेबल-सेल तत्वों में बहुत अच्छी तरह से नहीं बदलती हैं। इसके लायक होने के लिए, टेबल और फ्लेक्सबॉक्स मॉड्यूल के बीच बहुत अधिक ओवरलैप है। क्योंकि केवल मूल तत्व को इसके प्रदर्शन प्रकार को संशोधित करने की आवश्यकता होती है, यह छवियों के साथ बहुत अच्छी तरह से खेलता है (देखें: http://codepen.io/cimmanon/pen/Azone)। – cimmanon