कॉलम चौड़ाई को जितना संभव हो उतना छोटा सेट करने के लिए कैसे करें?

Question

मैं पिछले तीन कॉलम को यथासंभव छोटा होने की कोशिश कर रहा हूं क्योंकि वे केवल क्रियाओं के लिए आइकन/लिंक धारण कर रहे हैं।

मैं भी संभव के रूप में शेष चौड़ाई के रूप में ज्यादा के लिए बड़े पाठ स्तंभ करना चाहते हैं।

Two columns table : one as small as possible, the other takes the rest

यह समाधान क्योंकि मैं एकाधिक स्तंभों है कि मैं के रूप में ज्यादा समय लग करना चाहते हैं मेरे लिए काम नहीं करता है:

यहाँ है कि मैं क्या लगता है करने में सक्षम था, लेकिन मेरे लिए काम नहीं किया है अंतरिक्ष जितना संभव हो, इसलिए मैं उनमें से कोई भी चौड़ाई = 100% पर सेट नहीं कर सकता।

force column size to smallest possible

मैं रिश्तेदार लंबाई (चौड़ाई = "*") का उपयोग करने की कोशिश की है, लेकिन यह कोई असर दिखाई नहीं देता। शायद ऐसा इसलिए है क्योंकि मैंने पहले कोई चौड़ाई निर्धारित नहीं की है, इसलिए वितरित करने के लिए कोई 'शेष चौड़ाई' नहीं है?

HTML:

<table> 
    <colgroup class='data' span='5'> 
    <col class='date' span='1'/> 
    <col class='id' span='1'/> 
    <col class='title' span='1'/> 
    <col class='status' span='1'/> 
    <col class='description' span='1'/> 
    </colgroup> 
    <colgroup class='action' span='3'> 
    <col class='show' span='1'/> 
    <col class='edit' span='1'/> 
    <col class='delete' span='1'/> 
    </colgroup> 
    <tr> 
    <th>Date</th> 
    <th>ID</th> 
    <th>Title</th> 
    <th>Status</th> 
    <th>Description</th> 
    <th colspan='3'></th> 
    </tr> 

    <tr> 
    <td class='date'>medium</td> 
    <td class='id'>medium</td> 
    <td class='title'>large</td> 
    <td class='status'>medium</td> 
    <td class='description'>large</td> 
    <td class='show'>small</td> 
    <td class='edit'>small</td> 
    <td class='delete'>small</td> 
    </tr> 
</table> 

सीएसएस:

table { 
    width: 100%; 
} 

table td.title, td.description { 
    text-align: left; 
} 

table td.date, td.id, td.status { 
text-align: center; 
} 

table td.show, td.edit, td.delete { 
} 

table colgroup.action col { 
    width:"1*"; 
} 

table colgroup.data col { 
    width:"*"; 
} 

प्राथमिकता के क्रम में

तो:

• मेज तक फैला पैरेंट कंटेनर की पूरी चौड़ाई

• पिछले thre ई आइकन/कार्रवाई कॉलम किसी भी कटऑफ के बिना संभव के रूप में छोटे होने

• 'बड़े' डेटा (वर्ग शीर्षक और विवरण) संभव

• स्तंभों के रूप में शेष अंतरिक्ष के रूप में ज्यादा समय लग जाना चाहिए के साथ कॉलम साथ 'मध्यम' डेटा दोनों पक्षों पर कुछ मार्जिन के साथ उनकी सामग्री के आकार के होने चाहिए

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

Answer 1

आपके अनुरोध का जवाब करने के लिए:

पिछले तीन आइकन/कार्रवाई कॉलम किसी भी कटऑफ बिना संभव के रूप में छोटे होने

ऐसा करने के लिए, मैं float हैं td रों या उन्हें display:inline-block;

यदि आप आइकन का आकार जानते हैं, तो आप th abov पर चौड़ाई सेट कर सकते हैं ई आइकन (जिसे मैं class="icons" पर कॉल करूंगा)।

यदि आप चौड़ाई को नहीं जानते हैं, तो आप कुछ jQuery का उपयोग करके गणना कर सकते हैं।

var a = $('td.show').width(); 
var b = $('td.edit').width(); 
var c = $('td.delete').width(); 

$('.icons').css('width', a+b+c+6+"px"); 

उदाहरण: http://jsfiddle.net/KQs2K/1/

अतिरिक्त 6px बाहर सीमा बिट्स मैं उदाहरण

नोट में फेंक दिया पैड की जरूरत: इन td रों जब स्क्रीन आकार असली छोटे हो जाता है ढेर होगा।

Answer 2

कॉलम आप हटना के लिए, 1 पिक्सेल चौड़ाई सेट:

table { 
    width: 100%; 
} 

th, td { 
    border: 1px solid #eee; 
} 

td.title, td.description { 
    text-align: left; 
} 

td.date, td.id, td.status { 
    padding: 0 10px; 
    text-align: center; 
    width: 1px; 
} 

td.show, td.edit, td.delete { 
    width: 1px; 
} 

तो फिर तुम पूरी तरह colgroups से छुटकारा मिल सकता है।

डेमो here देखें।

वैसे, आप इसके बजाय CSS flexible boxes का उपयोग करने पर विचार कर सकते हैं।