css - テーブルを等間隔にして単語を折り返す方法

Question

私はtwitterのブートストラップを使用していますが、解決策とは関係ないと思うので、コードは次のとおりです。

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}

属性の 1 つが大きくなりすぎると、テーブルが片側に移動し、大きなアイテム用のスペースが確保されます。元の等間隔を維持し、テーブルの行で単語の折り返しを許可するにはどうすればよいですか?

 <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%;
}

デモ