होल्डिंग टेबल की पूरी चौड़ाई को भरने के लिए समान आकार की तालिका कक्ष

Question

क्या कोशिकाओं की एक पंक्ति बनाने के लिए HTML/CSS (सापेक्ष आकार के साथ) का उपयोग करने का कोई तरीका है जिसमें तालिका है?

कोशिकाओं बराबर चौड़ाई होना चाहिए और बाहरी तालिका आकार भी <table width="100%"> साथ गतिशील है।

वर्तमान में यदि मैं एक निश्चित आकार निर्दिष्ट नहीं करता हूं; कोशिकाएं सिर्फ अपनी सामग्री को फिट करने के लिए स्वतः समायोजित करती हैं।

Answer 1

बस प्रतिशत चौड़ाई और fixed table layout का उपयोग करें:

<table> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
</tr> 
</table> 

साथ

table { table-layout: fixed; } 
td { width: 33%; } 

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

जाहिर है, अपनी परिस्थितियों फिट करने के लिए है, जो आमतौर पर केवल किसी वर्ग के साथ या संभवतः दी गई ID वाला एक तालिकाओं के लिए स्टाइल लागू करने का अर्थ सीएसएस समायोजित करें।

Answer 2

तुम भी कोशिकाओं के लिए एक विशिष्ट चौड़ाई सेट की जरूरत नहीं है, table-layout: fixed समान रूप से कोशिकाओं का प्रसार करने के पर्याप्त होता। IE8 पर परीक्षण किया गया यह jsfiddle देखें।

ध्यान दें कि टेबल स्टाइल तत्व को काम करने के लिए table-layout के लिए चौड़ाई सेट (मेरे उदाहरण में 100%) होना चाहिए।

Answer 3

table और td के लिए width: calc(100%/3); के लिए एक संपत्ति के रूप में table-layout: fixed का उपयोग करना (संभालने वहाँ 3 td के हैं)। इन दो गुणों के सेट के साथ, तालिका कक्ष आकार में बराबर होगा।

demo का संदर्भ लें।