修復了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>