设置表列宽

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

这是表格单元的标准行为。

一种方法是将div放置在您的单元格内，其style="width: 200px; overflow-hidden;"

Answer 2

您想使用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 3

使用table-layout: fixed问题将强制浏览器维持指定的尺寸。