Как сделать таблицу на одинаковом расстоянии и обертка слово

Question

Я использую Twitter Bootstrap, но я думаю, что это не имеет ничего общего с решением, так вот код:

div.span12 
    table.table.table-hover 
     thead 
     tr 
      th Device Name 
      th Device ID 
      th Device Description 
     tbody 
     each dev in devices 
      tr 
       td #{dev.dname} 
       td #{dev.did} 
       td #{dev.ddesc} 

Если один из атрибутов получает слишком большой, стол сдвигается в одну сторону, позволяя пространство для большого предмета. Как я могу сохранить первоначальное равномерное расстояние и разрешить перенос слов в строках таблицы?

<div class="span12"> 
    <table class="table table-hover"> 
     <thead> 
     <tr> 
      <th>Device Name</th> 
      <th>Device ID</th> 
      <th>Device Description</th> 
     </tr></thead> 
     <tbody> 
      <tr> 
       <td>nn</td> 
       <td>ii</td> 
       <td>dd</td> 
      </tr> 
     </tbody></table></div> 

Answer 1

Просто переопределять свойства td

td { 
    width: 33.33%; 
} 

DEMO