今時、テーブル書いてるんですがTDの中で適当に改行させたかったので調べてみた。

1.テーブルそのものの幅を決めてしまう。

<table style="table-layout:fixed;width:○○%;">

2.テーブルセル幅を設定する。

<table style="table-layout:fixed;width:100%;">
    <colgroup>
        <col style="width:33%;">
        <col style="width:33%;">
        <col style="width:33%;">
    </colgroup>
    <tbody>
        <tr><td>これで</td><td>hey</td><td>本当に</td></tr>
        <tr><td>ちゃんと</td><td>hey</td><td>きんとうに</td></tr>
        <tr><td>なります</td><td>hey</td><td>かね</td></tr>
    </tbody>
</table>

3.これだけでもいいみたい

<td style="word-wrap:break-word;"></td>

全部うまくいかないって人へ。

td.title{
width: 20px;
word-break: break-all;
}

<td class="title">20pxで折り返したいんです。aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbb</td>
連続した半角文字に効かせるために「word-break: break-all;」を入れています。



世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書 (世界一わかりやすい教科書) [ 株式会社マジカルリミックス:赤間 公太郎 ]