100% चौड़ाई वाली तालिका जो फ़्लोटिंग div

Question

के लिए जगह छोड़ती है मेरे पास एक सारणी है जिसका उपयोग मैं एक फॉर्म के लिए कर रहा हूं। समाधान की जरूरत है यह दो स्थितियों के लिए स्वचालित रूप से समायोज्य होने के लिए:

• जब तालिका के अधिकार के लिए नहीं चल div है, मैं तालिका चौड़ाई की 100% अप लेना चाहते हैं।

• जब तालिका के दाईं ओर एक फ़्लोटिंग div होता है, तो मैं चाहता हूं कि तालिका इस div के लिए कमरा दे, और शेष क्षैतिज स्थान ले ले।

मैं यह कैसे कर सकता हूं?

Answer 1

तालिका को overflow के साथ एक div में रखें जो visible नहीं है और यह फ़्लोट किए गए तत्व के बगल में शेष क्षेत्र ले जाएगा। फिर, उस तालिका में width:100% हो सकता है। कोड नीचे है और यहाँ एक उदाहरण jsfiddle है: http://jsfiddle.net/rgthree/uEt35/

सीएसएस

.floater { 
    float:right; 
} 

.tbl-container { 
    overflow:hidden; 
} 

.tbl-container > table { 
    width:100%; 
} 

एचटीएमएल

​<div class="floater"> 
    This is to the right. 
</div> 
<div class="tbl-container"> 
    <table> 
     <tr> 
      <td>hi</td> 
     </tr> 
    </table> 
</div> 

Answer 2

आप सही करने के लिए div निकाल सकते हैं

display:none; 

का उपयोग कर

आप अपने अंतरिक्ष

visibility:hidden; 

आपका तालिका का उपयोग इसलिए जब div प्रदर्शन है 100% की चौड़ाई होगा आरक्षित कर सकते हैं: कोई नहीं, div ऊपर अंतरिक्ष में नहीं लेंगे और तालिका स्वाभाविक रूप से विस्तार होगा। यदि आप केवल div को छुपाते हैं तो तालिका div की चौड़ाई के दाईं ओर एक छोटी चौड़ाई बनाए रखेगी।

यह जानकारी W3Schools