Question

我有一张桌子，但是细节列没有包裹，桌子比屏幕宽，使用水平滚动条很烦人。这会发生什么原因？我该怎么解决这个问题？我的代码如下。

非常感谢任何帮助。

提前问候并表示感谢，韦斯利

<table width="90%">
    <tr>
        <td class="row" colspan="3"><strong>Follow-Up History</strong></td>
    </tr>
    <tr>
        <td width="15%"><b>Consultant</b></td>
        <td width="65%"><b>Details</b></td>
        <td width="20%"><b>Date</b></td>
    </tr>
    <?
        $mydb = mysql_connect('localhost', 'root', 'elves');
        $q3 = "select * from clientcare.subcalls where callid = '$cID' order by `date` ASC";
        $r3 = mysql_query($q3, $mydb) or die("Query q3 died");
        while ($row3 = mysql_fetch_array($r3)) {
            $scConsultant = $row3["consultant"];
            $scDetails = $row3["details"];
            $scDate = $row3["date"];
    ?>
            <tr>
                <td width="15%"><?= $scConsultant; ?></td>
                <td width="65%"><?= $scDetails; ?></td>
                <td width="20%"><?= $scDate; ?></td>
            </tr>
            <tr><td colspan="3"><hr></td><td>&nbsp;</td></tr>
    <?
        }
        mysql_close($mydb);
    ?>
</table>

Answer 1

您应该使用CSS table-layout: fixed;属性并将width应用于table

你会看到类似的东西 -

没有包裹<td> - Text doesn't wrap（如果字符串没有任何空格）

如果字符串的空格如此fiddle

，则可以

但要确保您的td不会溢出长字符串

使用以下属性将数据包装在<td>的表中以包装长字符串：

table {
   table-layout: fixed;
   width: /* Whatever You Like */ ;
}

td { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

我的final fiddle（带空格的字符串）

我的 final fiddle （没有空格的字符串）

P.S您还可以修复<td>宽度，如下所示： fiddle

Answer 2

设置max-width，否则如果表格不合适，表格将会延长

<table style="max-width: 90%;">

Answer 3

最后一个tr的结构错误，

<tr><td colspan="3"><hr></td><td>&nbsp;</td></tr>

正确的结构

<tr><td colspan="3"><hr></td></tr>

表数据不包装

3 个答案: