如何防止 HTML 表格中的列寬擴充？

防止表格中的列寬擴展

許多開發人員在使用表格時經常遇到一個挑戰：確保列的寬度保持不改變，無論其單元格內的文字長度如何。在本文中，我們將解決這個問題，並提供一個解決方案來設定列寬，同時停用任何擴充功能。

理解問題

預設情況下，當文字超過表格單元格的指定寬度，包含的列將擴展以容納溢出。這種行為與列寬所需的一致性相矛盾。

解決方案：列寬穩定性

有兩個 CSS 屬性對於解決此問題至關重要：

• table-layout:fixed:此屬性將表格佈局模式設為fixed，確保無論單元格內容如何，列寬都保持一致。
• 寬度：此屬性設定列的明確寬度。

實現這些屬性以及適當的CSS邊框和表格寬度的樣式，達到預期目的行為：

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

示例：

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

此程式碼將兩列的列寬保持為100像素，即使第二個標題單元格中的文字為明顯更長。溢出：隱藏屬性隱藏任何多餘的文本，否則這些文本會突出到單元格邊界之外。

以上是如何防止 HTML 表格中的列寬擴充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！