केवल टेबल की सामग्री को फिट करने के लिए टेबल सेल सिकुड़ चौड़ाई कैसे बनाएं?

Question

मैं मेज 100% चौड़ाई करना चाहते हैं, लेकिन केवल इसे से एक स्तंभ एक नि: शुल्क चौड़ाई, की तरह होना चाहिए:

| A | B | C                 | 

तो ए और बी स्तंभों की चौड़ाई उनकी सामग्री की चौड़ाई से मेल खाना चाहिए, लेकिन तालिका समाप्त होने तक सी की चौड़ाई चलनी चाहिए।

ठीक है मैं ए और बी की चौड़ाई पिक्सेल में निर्दिष्ट कर सकता हूं, लेकिन समस्या यह है कि इन कॉलम की सामग्री की चौड़ाई तय नहीं की गई है, इसलिए यदि मैं एक निश्चित चौड़ाई निर्धारित करता हूं तो यह पूरी तरह से सामग्री से मेल नहीं खाता :(

पीएस: मैं वास्तविक तालिका आइटम का उपयोग नहीं कर रहा हूं, लेकिन एक div में लिपटे एक डीएल सूची। Div ने प्रदर्शित किया है: तालिका, डीएल प्रदर्शित है: टेबल-पंक्ति, और डीटी/डीडी डिस्प्ले: टेबल-सेल ...

Answer 1

अगर मैं तुम्हें समझ में आया, आप तालिका डेटा है, लेकिन आप ब्राउज़र div तत्वों का उपयोग कर में यह प्रस्तुत करना चाहते हैं (AFAIK टेबल और divs प्रदर्शन के साथ: तालिका ज्यादातर एक ही व्यवहार करती है)

।

(यहाँ एक काम jsfiddle है: http://jsfiddle.net/roimergarcia/CWKRA/)

मार्कअप:

<div class='theTable'> 
    <div class='theRow'> 
     <div class='theCell' >first</div> 
     <div class='theCell' >test</div> 
     <div class='theCell bigCell'>this is long</div> 
    </div> 
    <div class='theRow'> 
     <div class='theCell'>2nd</div> 
     <div class='theCell'>more test</div> 
     <div class='theCell'>it is still long</div> 
    </div> 
</div>​ 

और सीएसएस:

.theTable{ 
    display:table; 
    width:95%; /* or whatever width for your table*/ 
} 
.theRow{display:table-row} 
.theCell{ 
    display:table-cell; 
    padding: 0px 2px; /* just some padding, if needed*/ 
    white-space: pre; /* this will avoid line breaks*/ 
} 
.bigCell{ 
    width:100%; /* this will shrink other cells */ 
}​ 

दुखद हिस्सा मैं इस एक वर्ष नहीं कर सका है पहले, जब मुझे वास्तव में इसकी आवश्यकता थी -_-!