तालिका में एक पंक्ति के अंतिम कक्ष को सभी शेष चौड़ाई पर रखें

Question

नीचे दिए गए HTML खंड में, मैं एक स्तंभ की चौड़ाई कैसे बना सकता हूं जिसमें 'अंतिम' पंक्ति के शेष भाग पर कब्जा कर लिया गया है, और स्तंभों की चौड़ाई 'COLUMN ONE' और 'COLUMN TWO' में उनकी सामग्री को शामिल करने के लिए पर्याप्त विस्तृत होना चाहिए, और बड़ा नहीं।

धन्यवाद

table { 
 
    border-collapse: collapse; 
 
} 
 
table td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <table width="100%"> 
 
     <tr> 
 
      <td> 
 
      <span> 
 
      COLUMN 
 
      </span> 
 
      <span> 
 
      ONE 
 
      </span> 
 
      </td> 
 
      <td> 
 
      COLUMN TWO 
 
      </td> 
 
      <td> 
 
      LAST 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     ANOTHER ROW 
 
    </td> 
 
    </tr> 
 

 
</table>

Answer 1

आप लपेट और अंतिम स्तंभ 99% की चौड़ाई नहीं देने के लिए पहले दो स्तंभों बताने के लिए की आवश्यकता होगी:

<table width="100%"> 
     <tr> 
     <td style="white-space: nowrap;"> 
      <span> 
      COLUMN 
      </span> 
      <span> 
      ONE 
      </span> 
     </td> 
     <td style="white-space: nowrap;"> 
      COLUMN TWO 
     </td> 
     <td width="99%"> 
      LAST 
     </td> 
     </tr> 
    </table> 

संपादित करें: आपको सभी शैलियों/प्रस्तुति को (बाहरी ...) सीएसएस में रखना चाहिए।

स्तंभों के लिए कक्षाओं का उपयोग करना (आप nth-child() तरह css3 चयनकर्ताओं इस्तेमाल कर सकते हैं बजाय अगर आप केवल आधुनिक ब्राउज़र को लक्ष्य):

एचटीएमएल:

<tr> 
    <td class="col1"> 
    // etc 

सीएसएस:

.col1, .col2 { 
    white-space: nowrap; 
} 
.col3 { 
    width: 99%; 
}