डिवी

Question

के बाहर तालिका बहती है मैं एक टेबल को रोकने की कोशिश कर रहा हूं जिसने चौड़ाई को स्पष्ट रूप से घोषित किया है कि उसके माता-पिता div के बाहर बहती नहीं है। मुझे लगता है कि मैं इसे max-width का उपयोग करके किसी भी तरह से कर सकता हूं, लेकिन मुझे यह काम नहीं मिल रहा है।

निम्नलिखित कोड (एक बहुत छोटी सी खिड़की के साथ) इस कारण होगा:

<style type="text/css"> 
    #middlecol { 
    width: 45%; 
    border-right:2px solid red; 
    } 
    #middlecol table { 
    max-width:100% !important; 
    } 
</style> 

<div id="middlecol"> 
    <center> 
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center"> 
     <tr> 
     <td bgcolor="#DDFFFF" align="center" colspan="2"> 
      <strong>Notification!</strong> 
     </td> 
     <tr> 
     <td width="50"> 
      <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0"> 
     </td> 
     <td> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </td> 
     </tr> 
    </table> 
    </center> 
</div> 

लाल रेखा div की दाईं बॉर्डर है, और अगर आप अपने ब्राउज़र विंडो छोटे बनाने के लिए, आपको लगता है कि देखेंगे तालिका इसमें फिट नहीं है।

Answer 1

बारी उसके चारों ओर करके:

<style type="text/css"> 
    #middlecol { 
    border-right: 2px solid red; 
    width: 45%; 
    } 

    #middlecol table { 
    max-width: 400px; 
    width: 100% !important; 
    } 
</style> 

इसके अलावा, मैं आपको सलाह होगा:

• center टैग नहीं का उपयोग करें (यह पदावनत है)
• width, bgcolor विशेषताओं का उपयोग न करें , उन्हें सीएसएस द्वारा सेट करें (width और background-color)

(यह मानते हुए कि आप तालिका प्रस्तुत किया गया है नियंत्रित कर सकते हैं),

Answer 2

मेज पर एक width="400" नहीं है इसे हटाने और यह काम करेगा ...

Answer 3

एक कच्चे काम के आसपास युक्त div पर display: table स्थापित करने के लिए है ।

Answer 4

आप table-layout:fixed का उपयोग कर तालिकाओं को अपने मूल div से आगे बढ़ाने से रोक सकते हैं।

नीचे दिया गया सीएसएस आपके टेबल को इसके चारों ओर div की चौड़ाई तक विस्तारित करेगा।

table 
{ 
    table-layout:fixed; 
    width:100%; 
} 

मुझे यह चाल here मिली।

Answer 5

पहले मैंने जेम्स लॉरुक की विधि का उपयोग किया था। हालांकि इसने td की सभी चौड़ाई बदल दी।

मेरे लिए समाधान कॉलम पर white-space: normal का उपयोग करना था (जिसे white-space: nowrap पर सेट किया गया था)। इस तरह पाठ हमेशा टूट जाएगा। word-wrap: break-word का उपयोग करके यह सुनिश्चित होगा कि जब आवश्यक हो तो सब कुछ टूट जाएगा, यहां तक ​​कि एक शब्द के माध्यम से भी आधे रास्ते।

सीएसएस इस तो तरह दिखेगा:

td, th { 
    white-space: normal; /* Only needed when it's set differntly somewhere else */ 
    word-wrap: break-word; 
} 

यह हमेशा की तरह, वांछनीय समाधान हो नहीं हो सकता है के रूप में word-wrap: break-word तालिका अपठनीय में अपने शब्दों को बना सकता है। हालांकि यह आपकी मेज को सही चौड़ाई रखेगा।

Answer 6

मैंने ऊपर वर्णित सभी समाधानों का प्रयास किया, फिर काम नहीं किया। मेरे पास 3 टेबल एक दूसरे के नीचे है। आखिरी बार बहने वाला।मैं का उपयोग कर इसे तय:

/* Grid Definition */ 
table { 
    word-break: break-word; 
} 

बढ़त मोड में IE11 के लिए, आप word-break:break-all

Answer 7

मैं ऊपर के लगभग सभी की कोशिश की लेकिन मेरे लिए काम नहीं किया को यह निर्धारित करने की आवश्यकता ... निम्नलिखित

किया

word-break: break-all; 

यह माता पिता div (। तालिका के कंटेनर)