HTML表中的固定列宽

我有一个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，并且为了补偿第一列的宽度而减小。我怎样才能防止这种情况发生。我希望宽度不会改变，如果任何特定单元格中的内容太大而无法容纳，则应增加高度以适应。

您应该尝试以下CSS说明：

td { word-wrap: break-word; }

这适用于许多浏览器（是的，包括IE6，甚至包括IE5.5，但不是Fx3.0。它只被Fx3.5+识别。对Saf、Chr和Op也有好处，但我不知道这些浏览器的确切版本），并且不会对其他浏览器造成任何伤害

如果表的宽度仍然混乱，则还有：

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

这将迫使浏览器使用另一种表算法，在这种算法中，它不会尝试适应许多情况，包括尴尬的情况，而是坚持样式表所说的内容。

试试这种方法

<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中使用

style=“WORD-BREAK:BREAK-ALL；”

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

您可以尝试

wordwrap:break-word；

关于酒店的信息

---

此属性指定如果内容超出元素的指定渲染框的边界，当前渲染行是否应中断（这在某些方面与“clip”和“overflow”属性的意图类似）仅当元素具有视觉渲染、是具有明确高度/宽度的内联元素、绝对定位和/或是块元素时，此属性才应适用。

您只需添加word wrap:break wordCSS属性

您的代码应该如下所示

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

---

您可以使用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>

div.c220{宽度：220px；溢出：隐藏；}
div.c150{宽度：150px；溢出：隐藏；}
div.c70{宽度：170px；溢出：隐藏；}

是否尝试了

文本换行

？请为表格本身指定一个宽度，该宽度应等于所有单个宽度的总和。请记住，即使是边框宽度（例如1px）需要将其分解到总宽度中。但是如果单元格包含一个没有空格的长字符串，则会使表格布局有点混乱，因为没有包装的机会。

overflow:hidden

，如#Batbatar所建议的，这是一个好主意。