在表格中,<td>
的默認寬度是由文字內容自適應的,但是有時候我們需要讓所有的單元格寬度都相等,比如需要在表格中展示圖片或者其他內容時。
這時候可以使用 CSS 來設置相等寬度。
table { width: 100%; border-collapse: collapse; } td { width: 100px; /* 設置所有的 td 寬度為 100px */ border: 1px solid #ccc; padding: 10px; }
上面的 CSS 代碼將所有的<td>
元素的寬度都設置為 100px。
如果表格中有很多列,我們可以使用:nth-child(n)
選擇器來指定某一列的寬度,例如:
table { width: 100%; border-collapse: collapse; } td:nth-child(2) { /* 設置第二列的寬度為 150px */ width: 150px; } td { border: 1px solid #ccc; padding: 10px; }
上面的 CSS 代碼將第二列<td>
元素的寬度設置為 150px,其他列的寬度仍為默認自適應的寬度。
值得一提的是,如果表格中的內容太寬了,可能會出現列寬度不足以容納全部內容的問題,這時候我們可以使用table-layout: fixed;
屬性來固定表格的寬度,例如:
table { width: 100%; border-collapse: collapse; table-layout: fixed; /* 固定表格寬度 */ } td { border: 1px solid #ccc; padding: 10px; }
上面的 CSS 代碼將表格的寬度固定,如果某列內容過寬,則自動換行。
上一篇mysql備份推薦