修复了HTML表格中的列宽

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

你只需要添加word-wrap：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>