तालिका div के बाहर बह निकला

94

मैं एक ऐसी मेज को रोकने की कोशिश कर रहा हूं जिसमें चौड़ाई स्पष्ट रूप से अपने माता-पिता के बाहर बहने से घोषित है 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, और यदि आप अपनी ब्राउज़र विंडो को छोटा बनाते हैं, तो आप देखेंगे कि तालिका इसमें फिट नहीं है।

html css html-table

— waiwai933
स्रोत

2

ऑफ-टॉपिक: उपयोग न करें <center>। यह वर्षों से पदावनत है। इसके अलावा, आपके पास पहले से ही align="center"अपनी मेज पर है।

— 21egDwight

यह दुर्भाग्य से कुछ ऐसा है जिस पर मेरा कोई नियंत्रण नहीं है। Div के अंदर की सामग्री वास्तव में एक फ़ाइल से शामिल होती है जो मेरे द्वारा उत्पन्न नहीं होती है। मैं केवल CSS को छू सकता हूं, लेकिन अगर मैं कर सकता हूं तो मैं <केंद्र> को समाप्त कर दूंगा।

— waiwai933 22

24

इसे मोड़कर करें:

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

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

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

centerटैग का उपयोग न करें (यह पदावनत है)
CSS ( और) द्वारा उनका उपयोग width, bgcolorविशेषताएँ न करेंwidthbackground-color )

(यह मानते हुए कि आप उस तालिका को नियंत्रित कर सकते हैं जो प्रदान की गई थी)

— Zyphrax
स्रोत

अगर मैं चौड़ाई बनाता हूं: 100% यह मेरे मार्जिन की उपेक्षा करता है: सही। जो क्षैतिज बार स्क्रॉलिंग का कारण बनता है

— जेसी

208

आप तालिकाओं का उपयोग करके उनकी पैरेंट डिव से आगे बढ़ने से रोक सकते हैं table-layout:fixed।

नीचे दी गई सीएसएस आपके टेबल को चारों ओर से दीव की चौड़ाई तक फैलाएगी।

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

मुझे यह तरकीब यहाँ मिली ।

— जेम्स लॉरुक
स्रोत

63

यह सभी स्तंभों को समान चौड़ाई के लिए मजबूर करता है ... बहुत उपयोगी नहीं है

— सर्ज

11

वास्तव में आप अभी भी कॉलम को अलग-अलग चौड़ाई में बना सकते हैं, आपको केवल चौड़ाई <col>को पहली पंक्ति में या <td>(पाठ के आकार के आधार पर प्रवाहित होने देना) निर्दिष्ट करना होगा । एमडीएन से: "निश्चित: तालिका और स्तंभ की चौड़ाई तालिका और कॉलोन तत्वों की चौड़ाई या कोशिकाओं की पहली पंक्ति की चौड़ाई से निर्धारित होती है। बाद की पंक्तियों में सेल स्तंभ की चौड़ाई को प्रभावित नहीं करते हैं।"

— फिलफेरो

1

बहुत बहुत धन्यवाद। यह एक बड़ी मदद थी जो आपने मेरे लिए की ...

— पार्थन_कौन

67

चारों ओर एक कच्चे काम display: tableयुक्त div पर सेट करने के लिए है।

— questzen
स्रोत

8

यह शानदार है, बिल्कुल वही जिसकी मुझे तलाश थी। यहां दूसरों की मदद करने के लिए कुछ जाने योग्य तार हैं: मैं माता-पिता को ओवरफ्लो करने के लिए सीएसएस का उपयोग करने की कोशिश कर रहा था, या ओवरफ्लो करने वाली तालिका सामग्री को कवर करने के लिए पृष्ठभूमि को फिट करने के लिए। यह पूरी तरह से काम किया, बहुत बहुत धन्यवाद!

— Trisweb

बस एक परिशिष्ट, कृपया उस संदर्भ पर ध्यान दें जहां यह लागू किया जा रहा है, इसका उपयोग व्यवहार की तरह तालिका लेआउट प्रदान करने के लिए किया जाता है और इसलिए तालिका-पंक्ति, तालिका-सेल जैसी अन्य शैली विशेषताओं की उपस्थिति होती है। टेब्यूलर लेआउट फ्लोट नहीं किए जाते हैं। समय पर प्रदर्शन: अकेले टेबल प्रॉपर्टी पर्याप्त नहीं है

— खोजकर्ता

जवाब के लिए खुदाई करने के घंटों बाद भी यहां आए। खोज इंजन के लिए स्ट्रिंग्स: div अंदर टेबल स्क्रॉल नहीं करेगा, फ़ायरफ़ॉक्स। टेबल के साथ div स्क्रॉल नहीं करेगा, फ़ायरफ़ॉक्स। स्क्रॉल के अंदर कोई स्क्रॉलिंग टेबल दिखाई नहीं दे रही है।

— anevaude

2

मैंने कुछ चीजों की कोशिश की है, लेकिन मैं सिर्फ प्रदर्शन जोड़ रहा हूं : शीर्ष पैरेंट डिव का टेबल । समस्या हल हो गई, धन्यवाद।

— गुने गुलेटिन

लंबे हेडर नामों और लंबी सेल सामग्री के साथ तालिकाओं के लिए सबसे अच्छा समाधान। धन्यवाद!।

— एगे बेराक

34

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

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

एज मोड में IE11 के लिए, आपको इसे सेट करने की आवश्यकता है word-break:break-all

— श्री डूम्सबस्टर
स्रोत

12

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

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

CSS इस तरह दिखेगा:

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

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

— सैंडर कोएडूद
स्रोत

5

मैंने उपरोक्त सभी की कोशिश की, लेकिन मेरे लिए काम नहीं किया ... निम्नलिखित ने किया

word-break: break-all;

इसे पैरेंट डिव (टेबल के कंटेनर) पर जोड़ा जाना है।

— वहीद असगर
स्रोत

1

overflow-x: auto;
overflow-y : hidden;

पैरेंट डिव के ऊपर स्टाइल लागू करें।

— ईसाई हीथ
स्रोत

-3

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

— घाटी
स्रोत