如何設置好看的表格css？

table {
border-collapse: collapse; /* 合并表格邊框 */
width: 100%; /* 表格寬度 */
text-align: center; /* 居中對齊 */
margin: 20px 0; /* 上下邊距 */
}
th, td {
padding: 10px; /* 單元格內邊距 */
border: 1px solid #ccc; /* 單元格邊框 */
}
th {
background-color: #f5f5f5; /* 表頭背景顏色 */
font-weight: bold; /* 加粗字體 */
}
tr:nth-child(even) {
background-color: #fafafa; /* 隔行背景顏色 */
}
tr:hover {
background-color: #eee; /* 鼠標懸停背景顏色 */
}

上面是一個基本的表格樣式，下面我們介紹一些常用的自定義樣式。

1. 表格內容溢出省略號

td {
max-width: 100px; /* 單元格最大寬度 */
white-space: nowrap; /* 不換行 */
text-overflow: ellipsis; /* 超出部分省略號 */
overflow: hidden; /* 超出部分隱藏 */
}

2. 表格單元格顏色漸變

tbody tr:nth-child(even) td {
background-color: #f5f5f5;
}
tbody tr:nth-child(odd) td {
background-color: #fff;
}
tbody tr:hover td {
background-color: #eee;
}

3. 表格內嵌圖片

table td {
position: relative; /* 相對定位 */
}
table td img {
position: absolute; /* 絕對定位 */
top: 10px; /* 圖片距離單元格上邊距 */
right: 10px; /* 圖片距離單元格右邊距 */
}

通過以上樣式的調整，可以使表格更加美觀，增加用戶的閱讀體驗。