โต๊ะล้นด้านนอก div

ฉันกำลังพยายามหยุดตารางที่มีการประกาศความกว้างอย่างชัดเจนไม่ให้ล้นเกินจากระดับ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และถ้าคุณทำให้หน้าต่างเบราว์เซอร์มีขนาดเล็กคุณจะเห็นว่าตารางนั้นไม่พอดีกับมัน

หันกลับมาโดยทำ:

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

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

นอกจากนี้ฉันขอแนะนำให้คุณ:

• ไม่ใช้ centerแท็ก (เลิกใช้แล้ว)
• อย่าใช้width, bgcolorคุณลักษณะพวกเขาตั้งโดย CSS ( widthและbackground-color)

(สมมติว่าคุณสามารถควบคุมตารางที่แสดงผลได้)

คุณสามารถป้องกันตารางจากการขยายตัวเกิน div table-layout:fixedพ่อแม่ของพวกเขาโดยใช้

CSS ด้านล่างนี้จะทำให้ตารางของคุณขยายจนเท่ากับความกว้างของ div ที่อยู่รอบ ๆ

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

ผมพบว่าเคล็ดลับนี้ที่นี่

การแก้ปัญหาคร่าวๆคือการตั้งค่าdisplay: tableบน div ที่มี

ฉันลองวิธีแก้ไขปัญหาทั้งหมดที่กล่าวมาแล้วไม่ได้ผล ฉันมี 3 ตารางหนึ่งอยู่ด้านล่างอีกโต๊ะหนึ่ง คนสุดท้ายไหลล้น ฉันแก้ไขโดยใช้:

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

สำหรับ IE11 ในโหมดขอบคุณต้องตั้งค่านี้เป็น word-break:break-all

ตอนแรกฉันใช้วิธีของ James Lawruk อย่างไรก็ตามสิ่งนี้เปลี่ยนความกว้างทั้งหมดของไฟล์td 's

วิธีแก้ปัญหาสำหรับฉันคือใช้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อาจทำให้คำในตารางอ่านไม่ออก อย่างไรก็ตามจะทำให้ตารางของคุณมีความกว้างที่เหมาะสม

ฉันพยายามเกือบทั้งหมดข้างต้น แต่ไม่ได้ผลสำหรับฉัน ...

word-break: break-all;

สิ่งนี้จะถูกเพิ่มใน div พาเรนต์ (คอนเทนเนอร์ของตาราง)

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

ใช้สไตล์ด้านบนกับ div ระดับบนสุด

คุณอาจลองใช้ CSS นี้ ฉันมีประสบการณ์ทำงานมาตลอด

div {
  border-style: solid;
  padding: 5px;
}

table {
  width: 100%;
  word-break: break-all;
  border-style: solid;
}

<div style="width:200px;">
  <table>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
    <tr>
      <td>data 1</td>
      <td>data 2</td>
      <td>data 3</td>
      <td>data 4</td>
      <td>data 5</td>
    </tr>
    <table>
</div>

มีwidth="400"อยู่บนโต๊ะถอดมันออกและใช้งานได้ ...