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

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

执行此操作的一种方法是使用style="width: 200px; overflow-hidden;"

在单元格内放置div

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将强制浏览器维护指定的维度。

设置表列宽

3 个答案: