फिक्स्ड-चौड़ाई कॉलम टेबल फोर्स कंटेनर

पर विस्तार से स्पष्ट रूप से क्लासिक समस्या है, लेकिन मैंने पाया "समाधान" काम नहीं किया है, जिसमें SO पर कई अन्य प्रश्न शामिल हैं।फिक्स्ड-चौड़ाई कॉलम टेबल फोर्स कंटेनर

अगर मेरे तालिका अपने कंटेनर से चौड़ा है, मैं अपने तालिका सेल चौड़ाई स्थिर रहते हैं और नहीं कंटेनर फिट करने के लिए आकार दिया जा चाहते हैं।

प्रतिलिपि प्रस्तुत करने योग्य एचटीएमएल (<td> रों पीएचपी साथ उत्पन्न):

<html> 
    <head></head> 

    <body> 
    <table> 
     <tr> 
     <?php for($i=0;$i<15;$i++) { 
      echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; 
     } ?> 
     </tr> 
    </table> 
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div> 
    </body> 
</html>

मैं क्या कोशिश की है:

table-layout:fixed
span कंटेनर display:inline-block इनलाइन ब्लॉक के साथ सेट
div कंटेनर के साथ

ऐसा लगता है पिछले कोड एक मेज है कि शरीर overflows उत्पन्न करने के लिए एक आसान तरीका होना चाहिए।

क्या कोई मदद कर सकता है?

संपादित

यह मेरे पिछले शब्दों से स्पष्ट नहीं हो सकता है, लेकिन मैं अपने आप स्तंभ चौड़ाई निर्दिष्ट करना चाहते हैं।

मैं मेज के लिए एक स्पष्ट चौड़ाई निर्दिष्ट किए बिना यह करने के लिए कोशिश कर रहा हूँ। केवल टीडी टेबल को व्यापक रूप से मजबूर करेंगे, जो (चाहिए?) कंटेनर को व्यापक रूप से मजबूर कर देगा।

इसके अलावा, इनलाइन सीएसएस केवल उदाहरण उद्देश्यों के लिए है।

स्रोत

2011-09-14 Ben

तालिका-लेआउट: निश्चित समस्या को हल करेगी। टीडी के लिए दी गई इनलाइन स्टाइल को हटा दें। आप एक चौड़ाई निर्दिष्ट कर रहे हैं। जब आप टीडी के लिए चौड़ाई निर्दिष्ट नहीं करते हैं, तो टीडीएस सामग्री के अनुसार आकार बदलती है और तालिका-लेआउट तय करने से सामग्री – Bala

@ बाला - फिट करने के लिए आकार बदलना नहीं होगा। मैं एक सेट चौड़ाई होने के लिए '' एस चाहता हूं। अगर मैं ' पर चौड़ाई निर्धारित नहीं करता हूं, तो समस्या को रद्द कर दिया गया है। – Ben

यदि आप जांच के लिए ऑनलाइन उपलब्ध हैं तो आप जेनरेट एचटीएमएल कोड या लेमेमे को साझा कर सकते हैं। – Bala

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<div style="margin: 0pt auto; width: 980px;"> 
    <div style="500px;overflow:scroll"> 
    <table style="width: 100%; table-layout: fixed;"> 
     <tbody> 
     <tr> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
     </tr> 
     </tbody> 
    </table> 
    <div style="background:chartreuse;width:150px">This is 150px wide.</div> 
    </div> 
</div> 
</body> 
</html>

स्रोत

2011-09-14 02:02:07 Bala

बीएएम वहां धन्यवाद था। मुझे पता था कि एक आसान समाधान था: पी मैं 'चौड़ाई: 100%' गायब था। चीयर्स! मेरा प्रतिलिपि कोड सही सीएसएस के साथ नीचे है। – Ben

मेरे प्रश्न में मेरे एचटीएमएल का उपयोग करके, यहां सही मार्कअप, @ बाला की प्रशंसा है।

<html> 

    <head></head> 

    <body> 
    <table style='table-layout:fixed;width:100%'> 
     <tr> 
     <?php for($i=0;$i<15;$i++) { echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; } ?> 
     </tr> 
    </table> 
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div> 
    </body> 

</html>

स्रोत

2011-09-14 03:23:21 Ben

फिक्स्ड-चौड़ाई कॉलम टेबल फोर्स कंटेनर

उत्तर

संबंधित मुद्दे