html - htmlでサイズが変わらない表の作り方

Question

ハイガイ私は、2 行 3 列のテーブルまたは同様の構造を作りたいと思っています。テーブルが作成された瞬間。上の行は 3 つのタイトル、下の行はタイトルの説明ですが、テキストが表のサイズを変更し続けるため、配置がきれいではありません。したがって、対称に見えません。幅と高さの長さのパーセンテージを指定しようとしましたが、構造はまだテキストで変更されています。しっかりとしたフレームを作りたい。手伝って頂けますか？

Answer 1

これを試して：

フィドル

table 
{ 
  table-layout: fixed; 
    width: 100%;
}
th, td 
{ 
  height: 100px; /*whatever you need */
  break-word: word-wrap; /* prevent td's to stretch to fit long words */
}

Answer 2

これを試すことができます：

<table>
    <tr>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Title 1 Title 1  Title 1  Title 1  Title 1  Title 1  Title 1  Title 1  Title 1 
            </div>
        </td>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Title 2 Title 2  Title 2  Title 2  Title 2  Title 2  Title 2  Title 2  Title 2 
            </div>
        </td>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Title 3 Title 3  Title 3  Title 3  Title 3  Title 3  Title 3  Title 3  Title 3 
            </div>
        </td>
    </tr>
    <tr>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Description 1 Description 1  Description 1
            </div>
        </td>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Description 2 Description 2  Description 2
            </div>
        </td>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Description 3 Description 3  Description 3
            </div>
        </td>
    </tr>
</table>

ただし、あまりにも多くのデータや長すぎるテキストを入力すると、テーブルが次のようになる場合があります。

EDIT：Marc Audetによると、これは実際には見栄えがします：