動態漂亮的表格是我們進行數據呈現的重要方式之一，而CSS為我們提供了方便快捷的方法實現漂亮的表格。本文將介紹如何利用CSS實現動態的美觀表格。

table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #008CBA;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
@media only screen and (max-width: 600px) {
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: none;
position: relative;
padding-left: 50%;
}
td:before, th:before {
position: absolute;
left: 6px;
content: attr(data-label);
text-transform: uppercase;
font-weight: bold;
}
}

首先，我們需要定義一個table元素，并將其樣式設置為寬度100%和邊框合并。接下來，我們定義表頭和單元格的樣式，包括邊框、內邊距、文本對齊等。我們還可以使用背景顏色和顏色屬性來設置表頭的樣式。通過使用:even和:hover偽類選擇器，我們可以為偶數行和鼠標懸停狀態設置不同的背景顏色。

為了使表格在小屏幕上響應式，我們使用@media媒體查詢并指定最大寬度為600px。我們將單元格和表頭的邊框設置為none，并將其位置設置為相對，確保其可以在表格容器中浮動。我們還可以通過使用:before偽元素為單元格和表頭添加標簽，以便更好地處理小屏幕。

總的來說，CSS是一個極其有用的工具，可以幫助我們創建漂亮的動態表格。通過使用上面的代碼，我們可以方便地創建一個美觀且響應式的表格，并將其應用于我們的網站和應用程序中。