CSS樣式設(shè)置表格寬度的方法

在CSS樣式中，我們可以使用width屬性來設(shè)置表格的寬度，這個屬性可以應用于表格元素（table），也可以應用于表格中的列（td或th）。

設(shè)置表格寬度

如果你想設(shè)置整個表格的寬度，可以直接在table元素上應用width屬性，如果你想讓表格的寬度為500像素，可以這樣做：

table {
    width: 500px;
}

設(shè)置列寬度

如果你想設(shè)置表格中某列的寬度，可以在該列的td或th元素上應用width屬性，如果你想讓***列的寬度為200像素，可以這樣做：

table td:first-child {
    width: 200px;
}

百分比寬度

除了像素值，你還可以使用百分比來設(shè)置寬度，這可以讓表格的寬度根據(jù)其父元素的寬度自動調(diào)整，如果你想讓表格的寬度為其父元素的80%，可以這樣做：

table {
    width: 80%;
}

響應式表格

在響應式設(shè)計中，你可能希望表格的寬度能夠根據(jù)不同的屏幕尺寸自動調(diào)整，這時，你可以結(jié)合使用媒體查詢（Media Queries）和百分比寬度來實現(xiàn)，你可以這樣設(shè)置：

table {
    width: 100%;
}
@media screen and (min-width: 600px) {
    table {
        width: 80%;
    }
}

在這個例子中，當屏幕尺寸大于600像素時，表格的寬度會調(diào)整為80%，而在屏幕尺寸小于或等于600像素時，表格的寬度會保持100%。