ताला तालिका सेल

Question

तो मेरे पास है

<table> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

और

table 
    { width: 100%; height: 100%; } 

प्रत्येक कोशिका तालिका की एक समान तिमाही तक ले जाता है, और तालिका खिड़की फिट करने के लिए फैला ।

मैं इन तालिका कोशिकाओं को कोशिकाओं के भीतर सामग्री (अभी भी तालिका के कंटेनर को फ़िट करने के दौरान) फिट करने के लिए खुद को आकार देने से कैसे रोक सकता हूं?

Answer 1

आप table-layout:fixed; को आजमा सकते हैं - यह एक निश्चित निश्चित आकार (सीएसएस में निर्दिष्ट) के लिए लेआउट सेट करता है और कोशिकाओं की सामग्री को अनदेखा करता है, इसलिए सेल की चौड़ाई कभी भी नहीं बदली जाती है। मुझे यकीन नहीं है कि यह लंबवत लेआउट को प्रभावित करता है या नहीं।

More info on w3schools।

Answer 2

td{ width:50%; } तब तक काम करेगा जब तक टेबल पर्याप्त छोटा न हो जाए।

Answer 3

आप सभी जगह चबाना और सेट किए गए एक एकल कोशिका लेने के लिए कोशिश कर सकते 100% करने के लिए ऊंचाई और चौड़ाई:

<table> 
    <tr> 
     <td>Hi There.</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td>Here is some text.</td> 
     <td class="space-hog"></td> 
    </tr> 
</table> 

और कुछ सीएसएस:

table { 
    width: 100%; 
    height: 100%; 
} 
td { 
    white-space: nowrap; 
} 
td.space-hog { 
    width: 100%; 
    height: 100%; 
} 

और एक live example। .space-hog इसकी बात करता है, इसलिए white-space: nowrap पर अप्रिय लाइन रैपिंग से बचने के लिए आपको सावधान रहना होगा। यदि आप अंतिम पंक्ति में .space-hog डालते हैं तो आप दिलचस्प भागों को नीचे धक्का देने से बच सकते हैं।

Answer 4

शायद overflow:hidden; का उपयोग करने की लाइनों के साथ कुछ?

Answer 5

आप प्रत्येक तालिका सेल की सामग्री पर position: absolute का उपयोग कर ऐसा कर सकते हैं: क्योंकि यदि आप करते हैं तो सामग्री का आकार सेल के आकार को प्रभावित नहीं करता है।

ऐसा करने के लिए, आपको तालिका कक्षों को भी स्थिति में रखना होगा (ताकि सामग्री की पूर्ण स्थिति तालिका कक्ष से संबंधित हो) - and/or, to support Firefox, position an extra div within the table cells क्योंकि फ़ायरफ़ॉक्स आपको कोशिकाओं को स्थिति लागू करने की अनुमति नहीं देता है।

उदाहरण के लिए, मैं इस HTML उपयोग कर रहा हूँ:

<td><div class="bigimg"><img src="...."/></div></td> 

निम्नलिखित सीएसएस के साथ, ताकि छवि का आकार सेल जो उसमें शामिल के आकार को प्रभावित नहीं करता:

div.bigimg 
{ 
    height: 100%; 
    width: 100%; 
    position: relative; 
} 
div.bigimg > img 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

मैं td जो उसमें शामिल के आकार मैच के लिए, क्योंकि मैं जावास्क्रिप्ट का उपयोग कर रहा रन टाइम पर छवियों का आकार करने के लिए अपने कंटेनर, फिट करने के लिए height और 100% को div.bigimg की width सेट जो div.bigimg हैं।

Answer 6

मैंने निश्चित तालिका लेआउट के बिना ऐसा करने में कामयाब रहा है। सेल की सीएसएस:

.dataCell { 
    display: table-cell; 
    padding: 2px 15px 2px 15px; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: auto; 
    max-width: 1px; 
} 

Answer 7

तालिका के स्टाइल को table-layout:fixed; जोड़ें।

यदि आपको लगता है कि यह चौड़ाई को ठीक करने में मदद करता है लेकिन ऊंचाई नहीं, तो ऐसा इसलिए होता है क्योंकि प्रत्येक टीडी सेल में कुछ प्रकार के पैडिंग मौजूद हो सकते हैं। टीडी की स्टाइल में padding:0px; जोड़ें।

Answer 8

तुम भी कोशिकाओं एक प्रतिशत करने के लिए, ताकि जवाबदेही बनाए रखने के लिए बंद कर सकते हैं, जैसे:

td:first-child, th:first-child { 
    width: 20%; 
    } 
    // assuming you have 8 remaining columns (20 + 10*8 = 100%) 
    td:not(:first-child), th:not(:first-child) { 
    width: 10%; 
    }