设置表列宽

Question

I am trying to setup a table column width to only 200px or 10%. However, when I populate the data from the database, the column seems to ignore the column width and expand it as much as it can. Here is my table 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

You want to use 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;
}