表数据未包装 - table data not wrapping

table data not wrapping

本文关键字：包装数据 | 更新日期: 2023-12-28

我有一个表，但details列没有换行，表比屏幕宽，使用水平滚动条很烦人。为什么会发生这种情况？请问我该怎么解决？我的代码在下面。

非常感谢您的帮助。

提前致以问候和感谢，韦斯利

<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>

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

你会看到这样的东西-

不包装您的<td>-文本不包装（如果字符串没有任何空格）

否则，如果字符串有这样的空格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 */
}

我的最后小提琴（带空格的字符串）

我的最后小提琴（无空格字符串）

p.S你也可以这样修复<td>的宽度：fiddle

设置max-width，否则如果不适合，表将扩展

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

最后一个tr的结构错误，

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

正确的结构

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