Дочерняя таблица перекрывает родительский div

Question

Используя ckeditor, пользователи могут добавить описание в свой список.Некоторые описания имеют ширину таблицы, которая шире, чем содержащий div.Как заставить описание вписаться в содержащий div?

<div style="float:left; padding-top: 4px; font-size:13px; width:500px; border-style:solid;">                    
<table border="1" cellpadding="0" cellspacing="0" style="width:576px; height: 120px;">          
  <tr height="39">          
    <td height="39">                
      <p>                   
        <span style="font-size:16px;">
          <span style="color: rgb(255, 140, 0);">APPLE FACTORY RECERTIFIED IPAD/1ST-GENERATION TABLET APPLE:
          </span>
        </span>
      </p>              
      <p>                   &nbsp;
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">A4/A4X1-1.00G 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">256MB/1-DIMM 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">16GB/FLASH 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">802.11A/B/G/N+BT INTEGRATED-GRAPHICS/0MB 9.7WXGA-
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">TOUCHSCREEN/MULTI-TOUCH APPLE/IOS-4.0 1.5LBS 1YR
          </span>
        </span>
      </p>          </td>       
  </tr>
</table>
<p> &nbsp;
</p>                       
</span>            
</div>  

Answer 1

Вы также можете добавить атрибут overflow: hidden; в свой первый стиль div следующим образом:

<div style="float:left; padding-top: 4px; font-size:13px; width:500px; border-style:solid; overflow: hidden;">                    
<table border="1" cellpadding="0" cellspacing="0" style="width:576px; height: 120px;">          
  <tr height="39">          
    <td height="39">                
      <p>                   
        <span style="font-size:16px;">
          <span style="color: rgb(255, 140, 0);">APPLE FACTORY RECERTIFIED IPAD/1ST-GENERATION TABLET APPLE:
          </span>
        </span>
      </p>              
      <p>                   &nbsp;
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">A4/A4X1-1.00G 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">256MB/1-DIMM 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">16GB/FLASH 
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">802.11A/B/G/N+BT INTEGRATED-GRAPHICS/0MB 9.7WXGA-
          </span>
        </span>
      </p>              
      <p>                   
        <span style="font-size: 16px;">
          <span style="color: rgb(255, 140, 0);">TOUCHSCREEN/MULTI-TOUCH APPLE/IOS-4.0 1.5LBS 1YR
          </span>
        </span>
      </p>          </td>       
  </tr>
</table>
<p> &nbsp;
</p>                       
</span>            
</div>  

Он обрежет перекрывающийся текст, но он поместится в родительском div.

Answer 2

, чтобы заставить его просто дать таблице атрибут max-width.Вы установили для атрибута ширины значение 576px, которое, безусловно, больше, чем 500px div.

style="max-width:500px; height: 120px;">

greets