कैल्क() सीएसएस में कैल्क नहीं है, ब्राउज़र में अंतर

Question

मैंने दो टेबल बनाए हैं, और मैं पहले के आकार के आधार पर दाएं 3 कॉलम के width सेट करना चाहता हूं। मैंने calc((100% - 200px)/3) की कोशिश की लेकिन यह सभी ब्राउज़रों में काम नहीं करता है: फ़ायरफ़ॉक्स 40 विफल रहता है, IE11 विफल रहता है, और क्रोम 44 यह सही करता है। मैं यह कैसे कर सकता हूं ताकि calc() सभी ब्राउज़रों में समझा जा सके? या मुझे बस इसे भूल जाना चाहिए?

मैंने एक बहुत ही सरल संस्करण बनाया जो ठीक से विफल रहता है।

<table class="tableauTable"> 
<thead> 
    <tr class="tableauRow first"> 
     <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span> 
     </th> 
    </tr> 
</thead> 
<tfoot> 
    <tr class="tableauRow first"> 
     <th colspan="3" header="" class="tableauCell first"></th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span> 
     </th> 
    </tr> 
</tfoot> 
</table> 

ही, calc() साथ:

<table class="tableauTable"> 
<thead> 
    <tr class="tableauRow first"> 
     <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Julien GARDIN</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Justine VINCLAIR</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Marcel COMMAS</span> 
     </th> 
    </tr> 
</thead> 
<tfoot> 
    <tr class="tableauRow first"> 
     <th colspan="3" header="" class="tableauCell first"></th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Julien GARDIN</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Justine VINCLAIR</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Marcel COMMAS</span> 
     </th> 
    </tr> 
</tfoot> 

सीएसएस:

.tableauTable { 
     width:100%; 
     border-spacing: 1px; 
    } 
    .tableauRow.first .tableauCell { 
     background: #d2d2d2 none repeat scroll 0 0 !important; 
     text-align: center; 
    } 
    .tableauCell.first { 
     width: 150px; 
    } 
    .tableauCell.col3 { 
     width: 30%; 
    } 
    .tableauCell.col3x { 
     width: calc(30%); 
    } 
    .tableauCell.first { 
     background: #d2d2d2 none repeat scroll 0 0 !important; 
     text-align: center; 
    } 
    .tableauCell { 
     background: #eee none repeat scroll 0 0; 
     border: 2px solid white; 
     color: black; 
    } 

http://jsfiddle.net/sjefb/19vrf52o/

Answer 1

मैंने तालिका-लेआउट का उपयोग करके मेरी समस्या हल की: निश्चित और कॉलम आकार को ठीक करने के लिए, मैंने colgroup और col टैग का उपयोग किया। अब calc() व्यवहार करने लगता है, यह कहना है: बाएं कॉलम की एक निश्चित चौड़ाई है और अन्य सभी कॉलम समान रूप से आकार में हैं।

धन्यवाद, मेरे साथ सोचने के लिए सभी!

Answer 2

देखें क्यों आप एक singl calc की कोशिश कर रहे ई मूल्य? calc(30%);

कैल्क वाक्यविन्यास के बारे में बहुत पसंद है, खासकर संसाधन मूल्यों के बीच अंतराल।

width: calc((100% - 200px)/3); 
       ^^^^ ^^^^^ 

संपादित करें:: आप रिक्तियों जोड़ने की जरूरत है यह समस्या होने के लिए नहीं है, इसके बजाय दृष्टिकोण है कि चौड़ाई मूल्य है सेल करने के लिए लागू किया जा रहा है (क्योंकि फ़ायरबग से पता चलता है) लगता है, लेकिन अलग-अलग है कक्ष सामग्री पर निर्भर करता है, तो यह पता चलता जा रहा है कि चौड़ाई मूल्य से अधिक ग्रस्त है, इसलिए कुछ अन्य मूल्य निर्धारित करने का प्रयास करें:

तालिका में

और सेल सीएसएस परिभाषाओं सेट:

box-sizing: border-box; 
margin:0;