HTMLテーブルのセル幅を制御するパート2
昨日、『HTMLテーブルのセル幅を制御するパート1』で、fixedモードでは『長いスペルの英語(半角文字)がセル内にすべて表示されない』と申し上げましたが・・・。
実は、fixedモードでもCSSで『word-wrap: break-word』を指定するとすべて表示されます。ちなみに、IE系のみです。
<html> <body> <table border="1" style="table-layout: fixed; word-wrap: break-word"> <col span="1" width="50px"> <col span="1" width="60px"> <col span="1" width="70px"> <col span="1" width="80px"> <col span="1" width="90px"> <col span="1" width="50px"> <col span="1" width="60px"> <col span="1" width="70px"> <col span="1" width="80px"> <col span="1" width="90px"> <caption>サンプル</caption> <thead> <tr> <th>見出し1</th> <th>見出し2</th> <th>見出し3</th> <th>見出し4</th> <th>見出し5</th> <th>見出し6</th> <th>見出し7</th> <th>見出し8</th> <th>見出し9</th> <th>見出し10</th> </tr> </thead> <tbody> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> <td>データ2</td> <td>データ3</td> <td>データ4</td> <td>データ5</td> <td>データ6</td> <td>データ7</td> <td>データ8</td> <td>データ9</td> <td>データ10</td> </tr> </tbody> </table> </body> </html>