कैसे एक व्यूपोर्ट

Question

मैं निम्नलिखित कोड है में सिकुड़ते से एक टेबल को रोकने के लिए: जब मैं ब्राउज़र खिंचाव ताकि व्यूपोर्ट 900px से कम है

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 0px; 
 
    border: 1px solid #d3d3d3; 
 
    width: 300px; 
 
    height: 100px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
}

<table> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>D</td> 
 
    <td>E</td> 
 
    <td>F</td> 
 
    </tr> 
 
    <tr> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    <td>I</td> 
 
    </tr> 
 
</table>

, टेबल की पंक्तियों को shrinked कर रहे हैं इस तथ्य के बावजूद कि मैं स्पष्ट रूप से चौड़ाई निर्धारित करता हूं, व्यूपोर्ट में फिट हूं। मैं इस व्यवहार को कैसे रोक सकता हूं?

Answer 1

मैं इस सवाल का जवाब अपने आप को खोजने में कामयाब रहे:

td { 
    padding: 0px; 
    border: 1px solid #d3d3d3; 
    min-width: 300px; 
    max-width: 300px; 
    width: 300px; 
    height: 100px; 
    text-align: center; 
    white-space: nowrap; 
} 

Answer 2

ई: बदले गए उत्तर।

हाय,

इस चेक बाहर, यह गतिशील होगा (ish) तालिका

http://jsfiddle.net/joshuamartin/KtAny/

(function() { 
    var tdWidth = '300'; 


    var columnCount = $("#tID").find('tr')[0].cells.length; 
    var tableWidth = tdWidth * columnCount; 

    $("table#tID").attr('width', tableWidth); 

    // console.log(tableWidth); 
})(); 

आप मैन्युअल रूप से अपने टीडी के की चौड़ाई दर्ज करनी की चौड़ाई निर्धारित करते हैं, क्योंकि मैं यह नहीं समझ सकता कि आप स्टाइलशीट से सीएसएस शैली कैसे प्राप्त कर सकते हैं।

कुछ this जैसे कुछ आपको गतिशील होने की इच्छा रखते हैं, लेकिन यह समाधान अच्छी तरह से काम कर रहा है। मैंने इसे वास्तव में काफी तोड़ दिया है, लेकिन आप इसे केवल एक टीडीविड्थ चर के साथ एक पंक्ति में कर सकते हैं।

(function() { 
    var tdWidth = '300';  
    $("table#tID").attr('width', $("#tID").find('tr')[0].cells.length * tdWidth); 
})(); 
​ 

Answer 3

लिखें इस table-layout:fixed;

Answer 4

प्रत्येक स्तंभ कोशिका के आकार के लिए मजबूर करने में छवि डालने;

<img src="blank.gif" width="300" height="1" border="0" alt="">