Question

我有一个HTML表，在PHP循环中添加了行。这就是循环体看起来像

<tr>
    <td style="width:220px"><?php echo $a; ?></td>
    <td style="width:150px"><?php echo $b; ?></td>
    <td style="width:70px"><?php echo $c; ?></td>
    <td style="width:70px"><?php echo $d; ?></td>
</tr>

问题是，当任何行的第二列中的内容稍微大时，第二列的宽度超过150px，并且为了补偿第一列的宽度减小。我怎样才能防止这种情况发生。我希望宽度不变，如果任何特定单元格中的内容太大而不适合，高度应该增加以适应。

Answer 1

你应该尝试这个CSS指令：

td { word-wrap: break-word; }

适用于许多浏览器（是的，包括IE 6，甚至是IE 5.5，但不是Fx 3.0。它只能通过Fx3.5 +识别。也适用于Saf，Chr和Op但我不知道确切的版本这些）并且不会对其他人造成任何伤害。

如果桌子的宽度仍然混乱，还有：

table { table-layout: fixed; }
th, td { width: some_value; }

这将迫使浏览器使用其他表格算法，它不会尝试适应许多情况，包括笨拙的情况，但坚持样式表所说的。

Answer 2

<tr>
     <td style="word-wrap:break-word;width:200px;"><?php echo $a; ?></td>
     <td style="word-wrap:break-word;width:150px"><?php echo $b; ?></td>
     <td style="word-wrap:break-word;width:70px"><?php echo $c; ?></td>
     <td style="word-wrap:break-word;width:70px"><?php echo $d; ?></td>
</tr>

您可以尝试word-wrap:break-word;

关于财产

此属性指定当内容超出元素的指定渲染框的边界时，当前渲染线是否应该中断（这在某些方面类似于intent中的'clip'和'overflow'属性。）此属性应该仅在元素具有可视化渲染时应用，是具有显式高度/宽度的内联元素，绝对定位和/或是块元素。

Answer 3

试试这种方式

<tr>
    <td style="overflow:hidden;width:200px;"><?php echo $a; ?></td>
    <td style="overflow:hidden;width:150px;"><?php echo $b; ?></td>
    <td style="overflow:hidden;width:70px;" ><?php echo $c; ?></td>
    <td style="overflow:hidden;width:70px;" ><?php echo $d; ?></td>
</tr>

或者你可以在风格

中使用style="WORD-BREAK:BREAK-ALL;

Answer 4

您只需要添加自动换行：break-word CSS属性。

您的代码应如下所示

<td style="width:150px; word-wrap: break-word"><?php echo $b; ?></td>

Answer 5

你可以用div包装每个tds内容并在每个div上应用css溢出样式：

尝试此示例，您可以更改或添加更多样式或更改溢出：

<style>
    div.c220{ width:220px; overflow:hidden; }
    div.c150{ width:150px; overflow:hidden; }
    div.c70{ width:170px; overflow:hidden; }
</style>
<tr>
    <td><div class="c220"><?php echo $a; ?></div></td>
    <td><div class="c150"><?php echo $b; ?></div></td>
    <td><div class="c70"><?php echo $c; ?></div></td>
    <td><div class="c70"><?php echo $d; ?></div></td>
</tr>

修复了HTML表格中的列宽

5 个答案: