सीएसएस टेबल कॉलम ऑटोविड

Question

निम्नलिखित को देखते हुए मैं अपने अंतिम कॉलम को अपनी सामग्री में ऑटो आकार कैसे दूं? (अंतिम कॉलम में सामग्री के लिए स्वतः-चौड़ाई होनी चाहिए। मान लीजिए कि मेरे पास केवल 1 एलई तत्व है, जिसे 3 लीज़ वाले भागों आदि से हटना चाहिए:

            <table cellspacing="0" cellpadding="0" border="0">
            <thead><!-- universal table heading -->
                <tr>
                    <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
                    <td class="tc">Type</td>
                    <th>File</th>
                    <th>Sample</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td class="last">
                        <ul class="actions">
                            <li><a class="iconStats" href="#">Statystyki</a></li>
                            <li><a class="iconEdit" href="#">Edytuj</a></li>
                            <li><a class="iconDelete" href="#">Usuń</a></li>

                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

सीएसएस:

table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}

Answer 1

निम्नलिखित आपकी समस्या का समाधान करेगा:

td.last {
    width: 1px;
    white-space: nowrap;
}

लचीला, कक्षा-आधारित समाधान

और एक अधिक लचीला समाधान एक .fitwidthवर्ग बना रहा है और इसे लागू करने के लिए किसी भी कॉलम में आप यह सुनिश्चित करना चाहते हैं कि उनकी सामग्री एक पंक्ति में फिट हो:

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

और फिर अपने HTML में:

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>

Comments

अच्छी तरह से काम! (मेरे मामले में टेबल की चौड़ाई 100% है और किसी अन्य कॉलम की चौड़ाई नहीं है। इसे एक कॉलम में लागू करें)। IE7 /

— 8/9

वाह, कभी नहीं सोचा था कि यह html तालिकाओं के साथ संभव है। धन्यवाद!

— कुल्पाए 22

'.Last' वर्ग को मैन्युअल रूप से जोड़ने के बजाय, आप चयनकर्ता के रूप में 'td: last-child' कर सकते हैं।

— टी.एच.ओ

इस समाधान के बिना अच्छी तरह से काम करता है table-layout: fixedकि सवाल में

— cs

शानदार प्रयास, साथी! यह सुनिश्चित करने के लिए कि वे "बड़े विवरण" या "नोट्स" जैसे "टेक्स्ट" कॉलम द्वारा कई लाइनों पर स्क्वैश नहीं करते हैं, कुछ स्तंभों को "प्राथमिकता" करने के लिए वास्तव में चालाक चाल है। अच्छा है! इसे और भी उपयोगी बनाने के लिए, मैं क्लास को कॉल करूँगा .fitwidthऔर फिर क्लास को उन कॉलमों पर सेट करूँगा जो आप कई लाइनों में नहीं जाना चाहते हैं। मैं जोड़ने के लिए आपके उत्तर को संपादित करूँगा।

— जोशुआ पिंटर

Answer 2

यदि आप यह सुनिश्चित करना चाहते हैं कि अंतिम पंक्ति नहीं लिपटे और इस तरह से आप इसे चाहते हैं, तो एक नज़र डालें

td {
 white-space: nowrap;
}

Answer 3

आप सभी की चौड़ाई को अंतिम टेबल कोशिकाओं को निर्दिष्ट कर सकते हैं और तालिका-लेआउट जोड़ सकते हैं: निश्चित और तालिका की चौड़ाई।

आप सेट कर सकते हैं

table tr ul.actions {margin: 0; white-space:nowrap;}

(या इसे अंतिम टीडी के लिए सेट करें क्योंकि सैंडर ने इसके बजाय सुझाव दिया है)।

यह इनलाइन-एलआई को तोड़ने के लिए मजबूर नहीं करता है। दुर्भाग्य से यह युक्त UL (और इस मूल TD) में एक नई चौड़ाई की गणना नहीं करता है, और इसलिए अंतिम TD को स्वत: नहीं करता है।

इसका मतलब है: यदि एक इनलाइन तत्व की चौड़ाई नहीं है, तो टीडी की चौड़ाई हमेशा पहले स्वचालित रूप से गणना की जाती है (यदि निर्दिष्ट नहीं है)। फिर इस परिकलित चौड़ाई के साथ इसकी इनलाइन सामग्री का प्रतिपादन किया जाता है और white-spaceगणना की सीमाओं से परे इसकी सामग्री को बढ़ाते हुए -प्राप्ती लागू की जाती है।

तो मुझे लगता है कि यह एक विशिष्ट चौड़ाई के साथ पिछले टीडी के भीतर एक तत्व के बिना संभव नहीं है।

Comments

अच्छा नहीं। यह वास्तव में मैं क्या कर रहा हूँ की कोशिश कर रहा हूँ। मैं नहीं चाहता हूं कि ओ चौड़ाई चौड़ाई निर्दिष्ट करें। स्तंभों का आकार स्वत: होना चाहिए और अंतिम रंग उसके अंदर की सामग्री के आकार का होना चाहिए।

— शेनकेम

क्या आप अपने द्वारा उपयोग की जाने वाली कक्षाओं के लिए सीएसएस-परिभाषाएँ प्रदान कर सकते हैं?

— एक्मे

Answer 4

इस तरह ऑटो और मिनट या अधिकतम चौड़ाई का उपयोग करें:

td {
max-width:50px;
width:auto;
min-width:10px;
}

Comments

यह आवश्यकतानुसार काम नहीं करता है, जब मेरे पास छोटी सामग्री होती है तब भी यह अधिकतम-चौड़ाई का उपयोग करता है।

— marcovtwout

न्यूनतम-चौड़ाई doe तालिका सेल पर लागू नहीं होती है।

— निक