Div dışında taşan tablo

Açıkça belirtilen genişliğe sahip bir tablonun üstünün dışına taşmasını durdurmaya çalışıyorum div. Bunu kullanarak bir şekilde yapabileceğimi sanıyorum max-width, ancak bunu çalıştıracak gibi görünmüyorum.

Aşağıdaki kod (çok küçük bir pencere ile) buna neden olacaktır:

<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>

Kırmızı çizgi, öğesinin sağ kenarlığıdır divve tarayıcı pencerenizi küçültürseniz, tablonun ona sığmadığını görürsünüz.

Şunları yaparak ters çevirin:

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

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

Ayrıca şunları yapmanızı tavsiye ederim:

• centerEtiketi kullanmamak (kullanımdan kaldırılmıştır)
• Kullanmayın width, bgcoloröznitelikler, bunları CSS ile ayarlayın ( widthve background-color)

(oluşturulan tabloyu kontrol edebileceğinizi varsayarak)

Kullanarak tabloların üst div öğelerinin ötesine genişlemesini önleyebilirsiniz table-layout:fixed.

Aşağıdaki CSS, tablolarınızın, onu çevreleyen div genişliğine kadar genişlemesini sağlayacaktır.

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

Bu numarayı burada buldum .

Etrafta kaba bir çalışma display: table, içeren div üzerinde ayarlanır .

Yukarıda belirtilen tüm çözümleri denedim, sonra işe yaramadı. Üst üste 3 tablom var. Sonuncusu aktı. Bunu kullanarak düzelttim:

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

Kenar modunda IE11 için bunu şu şekilde ayarlamanız gerekir: word-break:break-all

İlk başta James Lawruk'un yöntemini kullandım. Ancak bu, tüm genişliklerini değiştirdi td.

Benim için çözüm white-space: normal(ayarlanan white-space: nowrap) sütunlarda kullanmaktı . Bu şekilde metin her zaman kırılır. Kullanmak word-wrap: break-word, gerektiğinde her şeyin, hatta bir kelimenin ortasında bile bozulmasını sağlayacaktır.

CSS şu şekilde görünecektir:

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

Bu word-wrap: break-word, tablodaki sözcüklerinizi okunaksız hale getirebileceği için her zaman istenen çözüm olmayabilir. Ancak tablonuzu doğru genişlikte tutacaktır.

Neredeyse hepsini denedim ama benim için işe yaramadı ... Aşağıdakiler yaptı

word-break: break-all;

Bu, üst div'e (tablonun kapsayıcısı) eklenecektir.

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

Yukarıdaki stili üst div öğesine uygulayın.

Bu CSS'yi deneyebilirsiniz. Her zaman çalıştığını deneyimledim.

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>

Bir var width="400"masada, çıkarın ve işe yarayacak ...