隨著網(wǎng)站內(nèi)容的增加，頁面上的表格越來越常見。但有時(shí)，表格的默認(rèn)寬度可能不適合你的需求。在這種情況下，你可以使用 CSS 來調(diào)整表格的寬度。本文將向您介紹如何使用 CSS 來調(diào)整表格的寬度。 首先，讓我們看一下默認(rèn)的表格樣式：

名稱
年齡
性別
小明
20
男
小紅
22
女

上面的代碼是一個(gè)簡單的表格，其中有三列。如果你在網(wǎng)頁上查看這個(gè)表格，你會(huì)發(fā)現(xiàn)它是默認(rèn)的整個(gè)屏幕寬度。 如果你想改變表格的寬度，你可以使用 CSS 中的 width 屬性。width 屬性告訴瀏覽器該元素應(yīng)該有多寬。例如，如果你想讓表格的寬度為 50%：

table {
width: 50%;
}

現(xiàn)在，表格的寬度僅占屏幕的一半。 但是，這樣的話，表格的列仍然每列分配 1/3 的屏幕寬度。如果你想改變列的寬度，可以使用 CSS 中的表格屬性：table-layout。該屬性允許你控制表格的自動(dòng)布局算法。 table-layout 屬性有兩個(gè)值：auto 和 fixed。auto 是默認(rèn)值，它允許表格的列根據(jù)內(nèi)容自動(dòng)調(diào)整寬度。fixed 值將強(qiáng)制瀏覽器使用表格中指定的寬度值。 例如，如果你想讓表格的列有相同的寬度：

table {
width: 50%;
table-layout: fixed;
}

使用上面的樣式，表格的列現(xiàn)在是均勻的分配 1/3 的表格寬度。你還可以使用 CSS 中的 colgroup 和 col 元素來為每列設(shè)置指定的寬度。 總體而言，通過使用 CSS，你可以很容易地調(diào)整表格的寬度和列寬。這可以幫助你有效地管理頁面上的內(nèi)容，并確保表格看起來整潔和易于閱讀。