तालिका कॉलम, सीएसएस

Question

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

यह भी लगता है कि यह कैसे काम करता आसपास कुछ परस्पर विरोधी जवाब theres:

• न्यूनतम/अधिकतम चौड़ाई काम करना चाहिए: Prevent text from overlap table td width
• न्यूनतम/अधिकतम चौड़ाई समर्थित नहीं हैं: Min-width and max-height for table attributes

मैं करूंगा निम्नलिखित

table{ 
    width:100%; 
} 
.a, .b, .c 
{ 
    background-color: red; 
} 
.a 
{ 
    min-width: 10px; 
    max-width: 20px; 
} 
.b 
{ 
    min-width: 40px; 
    max-width: 45px; 
} 
.c 
{ 
} 

<table> 
    <tr> 
     <td class="a">A</td> 
     <td class="b">B</td> 
     <td class="c">C</td> 
    </tr> 
</table> 

क्या जावास्क्रिप्ट (यानी तालिका के साथ स्तंभों को अवरुद्ध करना) के बिना इसे प्राप्त करने का कोई तरीका है?

• मैं केवल इस CSS3 + एचटीएमएल 5
• सामान का विस्तार नहीं के साथ एक jsfiddle के साथ काम करने की जरूरत है: http://jsfiddle.net/4b3RZ/10/
• अगर मैं सेट केवल न्यूनतम-चौड़ाई कॉलम मैं एक आनुपातिक खिंचाव मिलता है पर: http://jsfiddle.net/4b3RZ/8/

0123: नीचे

क्या वास्तव में कुछ अलग सीएसएस सेटअप के लिए प्रदान की गई हो जाता है की एक तालिका है

Answer 1

टेबल्स अलग-अलग काम करते हैं; कभी-कभी काउंटर-सहजता से।

समाधान के बजाय तालिका कक्षों पर width का उपयोग करना है।

हालांकि यह उस स्थिति की तरह लग सकता है कि कोशिकाएं दी गई चौड़ाई से नीचे नहीं हटेंगी, वे वास्तव में।
सी पर कोई प्रतिबंध नहीं है, यदि आप तालिका को 70px की चौड़ाई देते हैं, तो ए, बी और सी की चौड़ाई क्रमशः 16, 42 और 12 पिक्सल के रूप में आ जाएगी।
400 पिक्सेल की तालिका चौड़ाई के साथ, वे आपके जैसा व्यवहार करते हैं जैसे आप ऊपर अपने ग्रिड में अपेक्षा करते हैं।
केवल तभी जब आप तालिका को बहुत छोटा आकार देने की कोशिश करते हैं (ए .min + b.min + c की सामग्री से कम) यह विफल हो जाएगा: तब तालिका स्वयं निर्दिष्ट से अधिक व्यापक होगी।

मैंने आपके पहेली के आधार पर एक स्निपेट बनाया, जिसमें मैंने सभी सीमाओं और पैडिंग और सीमा-दूरी को हटा दिया, ताकि आप चौड़ाई को अधिक सटीक माप सकें।

table { 
 
    width: 70px; 
 
} 
 

 
table, tbody, tr, td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    border-spacing: 0; 
 
} 
 

 
.a, .c { 
 
    background-color: red; 
 
} 
 

 
.b { 
 
    background-color: #F77; 
 
} 
 

 
.a { 
 
    min-width: 10px; 
 
    width: 20px; 
 
    max-width: 20px; 
 
} 
 

 
.b { 
 
    min-width: 40px; 
 
    width: 45px; 
 
    max-width: 45px; 
 
} 
 

 
.c {}

<table> 
 
    <tr> 
 
    <td class="a">A</td> 
 
    <td class="b">B</td> 
 
    <td class="c">C</td> 
 
    </tr> 
 
</table>