setup table column width

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

Это стандартное поведение ячейки таблицы.

Один из способов сделать это поместить DIV внутри ваших клеток с style="width: 200px; overflow-hidden;"

Answer 3

table-layout: fixed Использование для таблицы заставит браузер поддерживать заданные размеры.