0

次のような単純なテーブルがあります。

<table>
<tr>
   <td id="col1"><p>test1</p></td>
   <td id="col2">
        <p>testtestetst@test.com</p>
        <p>abcd@efg.com</p>
        <p>testtesttesttest@gmail.comasdfdsasadfsadfsadfasdf</p>
   </td>
   <td id="col3"><p>10 April 2010 4:33 PM</p></td>
</tr>
</table>

そしていくつかの CSS:

table{
  width: 300px;
}

#col1{
    width: 100px;
}

#col2{
    width: 100px;
    max-width: 100px;
}

#col3{
    width: 100px;
}

p{
    word-wrap: break-word;
}

上記のフィドル: http://jsfiddle.net/ypMQX/

テーブルと各列の幅を修正しました。また、すべての段落要素に設定word-wrapしました。break-word次に、最大幅を に設定し#col2ます。カラム 2 を に設定しているにもかかわらず、折り返しなしでカラム 2 を大きく拡張できるのはなぜbreak-wordですか?

すべての列の幅を固定して、コンテンツを折り返すようにしたいと考えています。これはどのように達成できますか？

4

2 に答える 2

0

テストしているブラウザは何ですか？私はFirefoxを使用していますが、これが私が見ているものです

ここに画像の説明を入力

とにかくこれはIEで壊れます。段落に別のセレクターを追加して、#col2好きなものを追加できます。

#col2, #col2 p {
  width: 100px;
  max-width: 100px;
}
于 2012-04-17T07:28:28.777 に答える
0

<p> タグに幅 100px を追加するだけです。テーブルの列に 100px 幅を追加する必要はありません。
必要なcssは次のとおりです。

table{
  width: 300px;
}


p{
 word-wrap: break-word;
 width: 100px;
}

フィドル: http://jsfiddle.net/QNwtj/4/

于 2012-04-17T07:27:19.167 に答える