как перносить текст без пробелов в таблице

225

10 декабря 2016, 10:37

Таблица находится в блоке div который занимает 87% от всей странице в таблице указано width='100%' если ввести много текста без пробелов в td то таблица выйдет из рамок блока. Как сделать что бы текст переносился и таблица не выходила за рамки div'а

Answer 1

Вам помогут свойства table-layout и word-wrap.

.example-area { 
  width: 87%; 
  background: #efefef; 
} 
.example-tbl { 
  width: 100%; 
  table-layout: fixed; /* ! */ 
  word-wrap: break-word; /* ! */ 
  border-collapse: collapse; 
} 
.example-tbl td { 
  padding: 10px; 
  vertical-align: top; 
  font-family: sans-serif; 
  font-size: 0.9em; 
  border: 1px solid #ccc; 
}

<div class="example-area"> 
  <table class="example-tbl"> 
    <colgroup> 
      <col width="40%" /> 
      <col width="25%" /> 
      <col /> 
    </colgroup> 
 
    <tbody> 
      <tr> 
        <td>this is</td> 
        <td>example</td> 
        <td>table</td> 
      </tr> 
      <tr> 
        <td>Pneumonoultramicroscopicsilicovolcanoconiosis</td> 
        <td>Llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch</td> 
        <td>ANTICONSTITUTIONNELLEMENT</td> 
      </tr> 
    </tbody> 
  </table> 
</div>