HTML तालिका में फिक्स्ड कॉलम चौड़ाई

Question

मेरे पास एक HTML तालिका है जिसमें PHP लूप में पंक्तियां शामिल हैं। यह वही है पाश शरीर जब किसी भी पंक्ति के दूसरे स्तंभ में सामग्री थोड़ा बड़े हैं, दूसरे स्तंभ की चौड़ाई 150px से अधिक है, और पहले की चौड़ाई क्षतिपूर्ति करने के लिए,

<tr> 
    <td style="width:220px"><?php echo $a; ?></td> 
    <td style="width:150px"><?php echo $b; ?></td> 
    <td style="width:70px"><?php echo $c; ?></td> 
    <td style="width:70px"><?php echo $d; ?></td> 
</tr> 

समस्या यह है की तरह लग रहा है कॉलम कम हो जाता है। मैं इसे होने से कैसे रोक सकता हूं। मैं चौड़ाई बदलना नहीं चाहता हूं, और यदि किसी विशेष सेल में सामग्री फिट करने के लिए बहुत बड़ी है, तो ऊंचाई को बढ़ाने के लिए ऊंचाई बढ़नी चाहिए।

Answer 1

आप इस सीएसएस अनुदेश प्रयास करना चाहिए:

td { word-wrap: break-word; } 

कि कई ब्राउज़रों में काम करता है (हाँ, IE 6, यहां तक ​​कि आईई 5.5 सहित, लेकिन FX 3.0 नहीं यह केवल Fx3.5 + द्वारा मान्यता प्राप्त है इसके अलावा के लिए अच्छा।। सुरक्षित, Chr और Op लेकिन मुझे इन लोगों के लिए सटीक संस्करण नहीं पता है) और अन्य में कोई नुकसान नहीं करते हैं।

तालिका की चौड़ाई अभी भी में गड़बड़ है, तो वहाँ भी है:

table { table-layout: fixed; } 
th, td { width: some_value; } 

कि ब्राउज़र अन्य तालिका एल्गोरिथ्म का उपयोग करने के लिए बाध्य करेगा, वह है जहां यह अजीब सहित कई स्थितियों अनुकूल करने के लिए कोशिश नहीं करता लेकिन स्टाइलशीट क्या कहता है उससे चिपके रहें।

Answer 2

<tr> 
    <td style="overflow:hidden;width:200px;"><?php echo $a; ?></td> 
    <td style="overflow:hidden;width:150px;"><?php echo $b; ?></td> 
    <td style="overflow:hidden;width:70px;" ><?php echo $c; ?></td> 
    <td style="overflow:hidden;width:70px;" ><?php echo $d; ?></td> 
</tr> 

या आप शैली में style="WORD-BREAK:BREAK-ALL; उपयोग कर सकते हैं

Answer 3

<tr> 
    <td style="word-wrap:break-word;width:200px;"><?php echo $a; ?></td> 
    <td style="word-wrap:break-word;width:150px"><?php echo $b; ?></td> 
    <td style="word-wrap:break-word;width:70px"><?php echo $c; ?></td> 
    <td style="word-wrap:break-word;width:70px"><?php echo $d; ?></td> 
</tr> 

आप word-wrap:break-word;

बारे में संपत्ति

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

Answer 4

आपको केवल शब्द-लपेटने की आवश्यकता है: ब्रेक-शब्द सीएसएस संपत्ति।

अपने कोड इस

<td style="width:150px; word-wrap: break-word"><?php echo $b; ?></td> 

Answer 5

की तरह दिखना चाहिए आप इसे एक div के साथ हर टीडीएस सामग्री लपेटा जा सकता है और प्रत्येक div पर सीएसएस अतिप्रवाह शैलियाँ लागू:

, इस नमूने का प्रयास करें आप बदल सकते हैं या अधिक जोड़ सकते हैं

<style> 
    div.c220{ width:220px; overflow:hidden; } 
    div.c150{ width:150px; overflow:hidden; } 
    div.c70{ width:170px; overflow:hidden; } 
</style> 
<tr> 
    <td><div class="c220"><?php echo $a; ?></div></td> 
    <td><div class="c150"><?php echo $b; ?></div></td> 
    <td><div class="c70"><?php echo $c; ?></div></td> 
    <td><div class="c70"><?php echo $d; ?></div></td> 
</tr>