सीएसएस प्रदर्शन: तालिका पहले कॉलम भी चौड़ा

Question

मैं इस तरह एक सीएसएस तालिका सेटअप:

<div class='table'> 
<div> 
    <span>name</span> 
    <span>details</span> 
</div> 
</div> 

तालिका के लिए सीएसएस है:

.table{ 
display:table; 
width:100%; 
} 
.table div{ 
text-align:right; 
display:table-row; 
border-collapse: separate; 
border-spacing: 0px; 
} 
.table div span:first-child { 
text-align:right; 
} 
.table div span { 
vertical-align:top; 
text-align:left; 
display:table-cell; 
padding:2px 10px; 
} 

यह खड़ा के रूप में दो कॉलम सामान रूप से विभाजित कर रहे हैं तालिका की चौड़ाई से कब्जा कर लिया अंतरिक्ष के बीच। मैं, पहले कॉलम केवल कब्जे यह कोशिकाओं

तालिका एक अज्ञात चौड़ाई है पाठ द्वारा के रूप में व्यापक रूप में की जरूरत है होना करने के लिए प्राप्त करने के लिए के रूप में कॉलम/कोशिकाएं होती हैं कोशिश कर रहा हूँ।

Answer 1

बस इसे एक 1px की तरह किसी भी छोटे चौड़ाई दे। टेबल कोशिकाएं हमेशा अपनी सामग्री को फिट करने के लिए सबसे छोटे संभव आकार तक फैली हुई हैं।

Answer 2

आप अपने वर्ग के नाम "तालिका" कुछ अन्य को बदलना चाहिए। "टेबल" का सुझाव है कि यह div की तुलना में कुछ तालिका का वर्ग है।

निम्नलिखित

<div class='table'> 
<div> 
    <span style="width:30%">name</span> 
    <span>details</span> 
</div> 
</div> 

Answer 3

आप पहले वाले बच्चे का भी उपयोग कर सकता है तालिका में पहले div खोजने के लिए और इसके साथ एक अलग देने की कोशिश।

.table div:first-child 
{ 
    width:30%; 
} 

Answer 4

मुझे लगता है कि आपको लगता है कि यदि पंक्ति से अलग है कि यह पाठ का आकार होने के लिए प्राप्त कर सकते हैं पता नहीं है लेकिन आप एक चौड़ाई = "स्वचालित" या स्तंभों के लिए एक प्रतिशत चौड़ाई सेट करने का प्रयास कर सकते हैं।

Answer 5

प्रयास करें ->table-layout: fixed