तालिका 3 कॉलम के साथ। फिक्स्ड सेंटर कॉलम चौड़ाई। अन्य दो स्तंभों पर साझा चौड़ाई कैसे साझा की जाए?

Question

मेरे पास 3 कॉलम के साथ 100% चौड़ाई तालिका है। केंद्र कॉलम 600px चौड़ाई होना चाहिए। शेष स्थान का उपयोग करते समय मेरे पास दो समान चौड़ाई कैसे हो सकती है?

<table style="width: 100%"> 
    <tr> 
     <td>left</td> 
     <td style="width: 600px">center</td> 
     <td>right</td> 
    </tr> 
</table> 

वर्तमान में, बाएं या दाएं कॉलम की सामग्री के आधार पर, वे हमेशा असमान होते हैं। मैंने बाएं और दाएं और साथ ही अन्य संख्याओं और न्यूनतम चौड़ाई परीक्षणों पर 50% चौड़ाई सेट करने का प्रयास किया है।

कृपया कोई jquery/जावास्क्रिप्ट नहीं है। धन्यवाद

Answer 1

मुझे लगता है कि केंद्र कॉलम के साथ उपयोग किया गया "align = center" आपकी मदद कर सकता है।

Answer 2

"colgroup" टैग का उपयोग इस के लिए एक बड़ी मदद हो सकता है।

<table class="fixed-center-table" border="1"> 
     <thead> 
      <colgroup> 
       <col> 
       <col id="middle-column"> 
       <col> 
      </colgroup> 
      <tr> 
       <th>First Column</th> 
       <th></th> 
       <th>Third Column</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr> 
       <td>AAAAAA</td> 
       <td>BBBB</td> 
       <td>CCCCC</td> 
      </tr> 
      <tr> 
       <td>AAAAAA</td> 
       <td>BBBB</td> 
       <td>CCCCC</td> 
      </tr> 
      <tr> 
       <td>AAAAAA</td> 
       <td>BBBB</td> 
       <td>CCCCC</td> 
      </tr> 
     </tbody> 
</table> 

.fixed-center-table { 
    table-layout: fixed; 
    width: 100%; 
    border-collapse: collapse; 
} 

.fixed-center-table td{ 
    text-align: center; 
} 

col#middle-column { 
    width: 600px; 
} 

Answer 3

इस पुराने प्रश्न का नया उत्तर।

1. मध्य स्तम्भ th एक max-width और min-width बजाय width
2. छोड़ दिया और सही th50% के width दें दे।
3. tablewidth बिल्कुल न दें।

मैंने इस उदाहरण को मध्य कॉलम width300px पर तय किया है।

jsBin Example!

सीएसएस

table { 
    border-collapse: collapse; 
} 
th, td { 
    border: solid 1px #CCC; 
    padding: 10px; 
} 
.fixed { 
    max-width: 300px; 
    min-width: 300px; 
} 
.fluid { 
     width: 50%; 
} 

एचटीएमएल

<table> 
    <thead> 
     <tr> 
      <th class="fluid">First Column</th> 
      <th class="fixed">Fixed Column</th> 
      <th class="fluid">Third Column</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table>