Настройка ширины столбца таблицы

Question

Я пытаюсь настроить ширину столбца таблицы только на 200 пикселей или 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 для таблицы заставит браузер поддерживать указанные размеры.