सीएसएस एक टेबल कॉलम बनाने के लिए जितना संभव हो उतना कमरा लेता है, और अन्य कोल्स

Question

के रूप में मुझे सीएसएस के साथ एक एचटीएमएल डेटाटेबल लेआउट की आवश्यकता है।

तालिका की वास्तविक सामग्री भिन्न हो सकती है, लेकिन हमेशा एक मुख्य कॉलम और 2 या अधिक कॉलम होते हैं। मैं मुख्य स्तंभ को जितनी संभव हो उतनी चौड़ाई के रूप में लेना चाहता हूं, इसकी सामग्री के बावजूद, जबकि अन्य कॉलम जितना संभव हो उतना चौड़ाई लेते हैं। मैं किसी भी कॉलम के लिए सटीक चौड़ाई निर्दिष्ट नहीं कर सकता क्योंकि उनकी सामग्री बदल सकती है।

मैं इसे सरल सरल रूप से मान्य HTML तालिका और सीएसएस का उपयोग करके कैसे कर सकता हूं?

उदाहरण के लिए

:

 
| Main column       | Col 2 | Column 3 | 
<------------------ fixed width in px -------------------> 
<------- as wide as possible ---------> 
Thin as possible depending on contents: <-----> <--------> 

Answer 1

मैं एक सीएसएस विशेषज्ञ होने से दूर कर रहा हूँ, लेकिन यह मेरे लिए काम करता (आईई, एफएफ, सफारी और क्रोम में):

td.zero_width { 
    width: 1%; 
} 

अपने HTML में

फिर :

Alexk के समाधान के लिए

<td class="zero_width">...</td> 

Answer 2

ही तरह, लेकिन संभवतः एक छोटे से अपनी स्थिति पर निर्भर करता है लागू करने के लिए आसान:

<table> 
    <tr> 
     <td>foo</td> 
     <td class="importantColumn">bar</td> 
     <td>woo</td> 
     <td>pah</td> 
    </tr> 
</table> 

.importantColumn{ 
    width: 100%; 
} 

यदि आप रैपिंग से बचना चाहते हैं तो आप कक्षों में white-space:nowrap भी लागू करना चाहेंगे।

Answer 3

मुझे width: 100%; के साथ सफलता नहीं मिली है क्योंकि ऐसा लगता है कि एक कंटेनर div के बिना जिसमें निश्चित चौड़ाई है, यह इच्छित परिणाम प्राप्त नहीं करेगा। इसके बजाय मैं निम्नलिखित की तरह कुछ उपयोग करता हूं और ऐसा लगता है कि मुझे अपना सर्वश्रेष्ठ परिणाम मिल रहा है।

.column-fill { min-width: 325px; } 

इस तरह यह बड़ा हो सकता है अगर यह करने की जरूरत है, और यह है कि ब्राउज़र सभी अतिरिक्त जगह दे देंगे करने के लिए जो भी स्तंभ इस तरह से सेट किया गया है लगता है। यकीन नहीं है कि यह हर किसी के लिए काम करता है लेकिन क्रोम में मेरे लिए किया है (दूसरों की कोशिश नहीं की है) ... एक शॉट के लायक है।