CSS課程表布局

/* 樣式 */
body {
background-color: #f2f2f2;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin: 0 0 40px 0;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
.table thead th {
background-color: #f2f2f2;
font-weight: bold;
}
.table tbody td {
border-bottom: 1px solid #f2f2f2;
}
.table tbody tr:last-of-type td {
border-bottom: none;
}
.table td {
padding: 10px;
}
@media screen and (max-width: 768px) {
.table {
display: block;
overflow-x: auto;
}
}

這是一份使用CSS實(shí)現(xiàn)的課程表布局樣式。在這個(gè)樣式中，我們需要設(shè)置一個(gè)包含全部表格的容器div，并將它居中顯示在頁(yè)面中間。

表格默認(rèn)為100%寬度，它位于容器中間，且設(shè)置為白色背景。為了給表格添加陰影效果，我們可以給容器應(yīng)用box-shadow屬性。

表頭需要加上背景顏色和粗體字，以區(qū)別于表格內(nèi)容。表內(nèi)容的每個(gè)單元格需要加上10像素的內(nèi)邊距，使得表格更美觀。我們還通過(guò)設(shè)置最后一行的底部邊框樣式為none來(lái)消除多余的底部邊框。

為了讓表格在手機(jī)屏幕上也能正常顯示，我們?cè)贎media查詢中增加了一個(gè)樣式，將表格轉(zhuǎn)換為塊級(jí)元素，并啟用水平滾動(dòng)條。