在網頁設計中，表格是一個常用的元素。然而，表格中的數據每個單元格的寬度是不固定的，這就容易導致頁面排版的混亂。為了解決這個問題，我們需要使用CSS來固定表格列寬。 首先，在CSS文件中定義表格樣式，包括每列的寬度。在表格的CSS中，我們可以添加以下代碼： ```css table { width: 100%; border-collapse: collapse; } table td, table th { padding: 8px; text-align: left; } table th { background-color: #eee; } table th:nth-child(1) { width: 20%; } table th:nth-child(2) { width: 40%; } table th:nth-child(3) { width: 40%; } ``` 其中，這些代碼將表格列分為三個不同的寬度：20%、40%和40%。這意味著，無論表格有多少列，它們的寬度將始終按照這個比例進行分配。甚至如果添加了更多的列，這段代碼也不需要修改。 接下來是固定表格列寬的關鍵代碼： ```css table { table-layout: fixed; } ``` table-layout屬性指定表格的布局方式。默認的值是auto，它會根據單元格內容的長度來調整列寬。而當設置為fixed時，表格會根據我們在CSS中定義的寬度來固定表格列寬。 最后，如果您還需要添加表格內的滾動條，可以用以下代碼： ```css tbody { height: 300px; overflow-y: scroll; } ``` 這段代碼將在表格的tbody元素上添加一個高度為300px的固定高度，并為它添加一個垂直滾動條。 在實際的應用中，在table元素設置了table-layout: fixed;之后，即可固定表格列寬，保證表格排版的清晰且整齊。