टेबल के साथ कैल्क() का उपयोग

Question

मैं निश्चित चौड़ाई td एस और चर-चौड़ाई td एस के साथ एक तालिका प्राप्त करने का प्रयास कर रहा हूं।

मैं सीएसएस calc() फ़ंक्शन का उपयोग कर रहा हूं, लेकिन किसी भी तरह ऐसा लगता है कि मैं टेबल में % का उपयोग नहीं कर सकता।

तो है कि क्या मैं अब तक है:

<table border="0" style="width:100%;border-collapse:collapse;"> 
    <tr style="width:100%"> 
     <td style="width:30px;">1</td> <!--Fixed width--> 
     <td style="width: calc((100% - 230px)/100 * 40);">Title</td> <!--Width should be 40% of the remaining space--> 
     <td style="width: calc((100% - 230px)/100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space--> 
     <td style="width: calc((100% - 230px)/100 * 20);">Album</td> <!--Width should be 20% of the remaining space--> 
     <td style="width:80px;">Year</td><!--Fixed width--> 
     <td style="width:180px;">YouTube</td><!--Fixed width--> 
    </tr> 
</table> 

मैं इसे कैसे देखते हैं, यह काम करना चाहिए, लेकिन ऐसा नहीं है।

क्या कोई इसे हल करने के बारे में जानता है? या शायद एक और सुझाव है कि मैं अपने लक्ष्य तक कैसे पहुंच सकता हूं?

Answer 1

टेबल्स में कॉलम की जगह वितरित करने के बारे में कठिन नियम हैं क्योंकि वे डिफ़ॉल्ट रूप से कक्षों की सामग्री पर निर्भर स्थान वितरित करते हैं। कैल्क (एटीएम) बस इसके साथ काम नहीं करेगा।

यदि आप घोषित सटीक चौड़ाई प्राप्त करने के लिए td तत्वों को बल देने के लिए के लिए table-layout विशेषता सेट करना है तो आप क्या कर सकते हैं। इस काम के लिए आपको टेबल पर width (100% काम) की भी आवश्यकता है।

table{ 
    table-layout:fixed; /* this keeps your columns with at the defined width */ 
    width: 100%;  /* a width must be specified */ 

    display: table;  /* required for table-layout to be used 
          (since this is the default value it is normally not necessary; 
          just included for completeness) */ 
} 

और फिर शेष कॉलम पर सादे प्रतिशत का उपयोग करें।

td.title, td.interpret{ 
    width:40%; 
} 
td.album{ 
    width:20%; 
} 

निश्चित चौड़ाई कॉलम के लिए स्थान का उपयोग करने के बाद, शेष स्थान कॉलम के बीच सापेक्ष चौड़ाई के साथ वितरित किया जाता है।

इस काम के लिए आपको डिफ़ॉल्ट प्रदर्शन प्रकार display: table (जैसा कि कहने के विपरीत, display: block) की आवश्यकता है। इसका मतलब है कि तालिका के लिए अब आपके पास height (min-height और max-height सहित) नहीं हो सकता है।

See your modified Example.

Answer 2

कैल्क सामान्य कार्य है।

-webkit-calc वेबकिट के लिए है।

उन ब्राउज़र के अनुसार जोड़ें जिन्हें आप उपयोग कर रहे हैं।

भले ही, आपके -calc- फ़ंक्शन को अनदेखा कर दिया जाएगा। 3 टीडी है जो शेष चौड़ाई का 40% होगा? कुल में 120% है। यह मेज़ है। माता-पिता की चौड़ाई हमेशा प्राथमिकता लेती है।

हालांकि, यदि आपके पास 5% में टीडी है, तो यह कुल चौड़ाई तालिका की तुलना में छोटी होगी, इसलिए इसे भी अनदेखा कर दिया जाएगा।

नीचे पंक्ति: तालिका के साथ कैल्क का उपयोग न करें।