स्थापना चौड़ाई उपलब्ध चौड़ाई

मैं एक HTML तालिका जिसका कोशिकाओं शामिल है, अन्य बातों के अलावा, स्पान, इस तरह के आधार पर:स्थापना चौड़ाई उपलब्ध चौड़ाई

... 
<td> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
</td> 
...

मैं एक तरह से की चौड़ाई हटना के लिए देख रहा हूँ उन रेखाओं को लाइन के बजाय लपेटें, जब युक्त टेबल सेल उन्हें एक पंक्ति पर दिखाने के लिए बहुत संकीर्ण है। मैंने spans 'max-width को 20px पर सेट करने और फिर चौड़ाई के लिए प्रतिशत का उपयोग करने के साथ खेलने की कोशिश की, लेकिन यह काम नहीं करता है क्योंकि तालिका कक्ष केवल इसकी सामग्री के रूप में व्यापक होने की कोशिश करता है।

न्यूनतम तालिका सेल चौड़ाई 1 लाइन पर शीर्षलेख प्रदर्शित करने के लिए आवश्यक चौड़ाई होगी।

दृश्य प्रकारों के लिए, यहाँ मैं वर्तमान में क्या है बात यह है कि पर्याप्त चौड़ाई है:

enter image description here

यहाँ हैं, जब पर्याप्त चौड़ाई नहीं है क्या मैं वर्तमान में है:

enter image description here

और यहां मैं यह देखना चाहता हूं कि प्रत्येक अवधि के लिए पर्याप्त चौड़ाई नहीं होने पर प्रत्येक 20px:

enter image description here

मामले में यह स्पष्ट नहीं है, फैला TXEs, RDBs, और RavenNets स्तंभों में रंगीन वर्गों रहे हैं।

स्रोत

2010-02-17 Matt Ball

+1 प्रश्न पूछने के लिए स्पष्ट रूप से, संक्षेप में, और आपके पास जो कुछ है और उसके लिए आपको क्या चाहिए! :) –

इसी प्रकार +1। अच्छा फॉर्म –

धन्यवाद। मैंने सोचा कि कोई भी मेरे एफएफ-केवल HTML स्रोत कोड को देखना नहीं चाहेगा, और आप जानते हैं कि वे शब्दों में एक तस्वीर के लायक के बारे में क्या कहते हैं ... –

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

स्रोत

2010-02-22 16:08:37

क्या आपने टीडी पर न्यूनतम चौड़ाई निर्धारित करने पर विचार किया है? या टीडी के अंदर एक रैपर div, लेकिन स्पैन के बाहर?

स्रोत

2010-02-17 19:17:15

'td' चौड़ाई यहां समस्या है। समस्या यह नहीं है कि 'td' बहुत संकीर्ण हो रहा है। इसके विपरीत, 'td' बिल्कुल उतना चौड़ा है जितना इसे होना चाहिए। समस्या 'td' की सामग्री को निचोड़ रही है ताकि वे अगली पंक्ति में लपेट न जाएं। –

रैपिंग से बचने के लिए <td nowrap> या <td style="white-space:nowrap;"> का उपयोग करें। एक टेबल सेल को आम तौर पर इसकी सामग्री को फिट करने के लिए विस्तारित किया जाना चाहिए, जब तक इसे लपेटने की अनुमति न हो, या आपने अपनी चौड़ाई को किसी अन्य तरीके से बाधित कर दिया हो।

स्रोत

2010-02-17 19:24:32 Ray

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

@bears - डरावना नाम! - ठीक है, सोचा कि मैं पहले स्पष्ट कोशिश करूँगा। सेटिंग चौड़ाई केवल ब्लॉक-स्तर तत्वों पर काम करती है, न कि स्पैन पर। आपके स्पैन की सामग्री क्या है? रंग कैसे सेट है? इमेजिस? बीजी रंग? ? – Ray

स्पैन खाली हैं। मैंने अपना प्रश्न पोस्ट करने से लगभग 30 मिनट पहले तक, स्पैन divs थे जो 'फ्लोट: बाएं' एड थे; वे बिल्कुल वही व्यवहार करते थे। मैंने इस अंत में 'डिस्प्ले: इनलाइन-ब्लॉक 'का उपयोग करने के साथ भी खेलना शुरू किया। रंग '-मोज़-रैखिक-ढाल' पृष्ठभूमि का उपयोग करके सेट किया गया है। –

इस तरह की तरह फ़ायरफ़ॉक्स 3.6 में आप जो चाहते हैं उसके करीब कुछ ऐसा लगता है। महत्वपूर्ण आवश्यकता यह प्रतीत होती है कि तालिका की चौड़ाई पिक्सल में नहीं हो सकती है।

<!DOCTYPE HTML> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> 

<style type="text/css"> 
    .indicator { 
     display:block; 
     white-space:nowrap; 
     min-width:8px; 
     max-width:300px; 
     width:100%; 
    } 

    .indicator li { 
     border:outset 2px; 
     display:inline-block; 
     height:80px; 
     min-width:2px; 
     max-width:80px; 
     padding:0 0 0 2px; 
     width:25%; 
    } 

    .ok { background:#0f0 } .caution { background:#ff0 } 
    .alert { background:#f00 } .inactive { background:#0ff } 

    table { width:100% } 
    td { width:100% } 

</style> 

</head> 

<body> 

<table><tr><td> 
<ul class="indicator"> 
    <li class="ok"></li> <li class="caution"></li> 
    <li class="alert"></li> <li class="inactive"></li> 
</ul> 
</td></tr></table> 

</body> 
</html>

स्रोत

2010-02-17 20:00:47

स्थापना चौड़ाई उपलब्ध चौड़ाई

उत्तर

संबंधित मुद्दे