セットアップテーブルの列幅

Question

テーブルの列幅を200pxまたは10％に設定しようとしています。しかし、データベースからデータを取り込むと、列の幅が無視され、可能な限り拡大されているように見えます。ここに私のテーブルhtmlがあります。

<table> 
<thead> 
    <tr> 
     <th><a href='#'>City</a></th> 
     <th width='200' class='table_width'><a href='#'>name</a></th> 
     <th><a href='#'>Agent</a></th> 
     <th>... 
    //I have tried class and width attribute. both don't work. 
    </tr> 
</thead> 
<tbody> 
     <tr> 
      //these column data were popluated from database 
      <td><?= $row->city; ?></td> 
      <td width='200' class='table_width'><?= $row->_name; ?></td> 
      //ignore the width and expand the table cell. 
      <td><?= $row->agent; ?></td> 
      <td>... 

     </tr> 

Answer 1

word-wrap:break-word;を使用します。

http://jsfiddle.net/RF4F6/1/

HTML

<table> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
      <th>Col 4</th> 
      <th>Col 5</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Normal Width</td> 
      <td>Normal Width</td> 
      <td class="forcedWidth">hiThisIsAreallyLongStringThatWillHaveToWrapAt200PixelsOrI'llBeUnhappyAndYouWon'tLikeMeWhenI'mUnhappy.</td> 
      <td>Normal Width</td> 
      <td>NormalWidth</td> 
     </tr> 
    </tbody> 
</table> 

CSS

table td{ 
    padding:.5em; /* Not essential for this answer, just a little buffer for the jsfiddle */ 
} 

.forcedWidth{ 
    width:200px; 
    word-wrap:break-word; 
    display:inline-block; 
} 

Answer 2

これは、表のセルの標準的な動作です。これを行うには

一つの方法は、テーブルのtable-layout: fixedを使用してstyle="width: 200px; overflow-hidden;"

Answer 3

とあなたの細胞の内側のdivは、指定された寸法を維持するために、ブラウザを強制する場所です。