原文出處：https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l
讓您的 HTML 表格看起來很棒很容易 - 在今天的帖子中，我們將看看大約 30 行 CSS 來做到這一點！
https://www.youtube.com/watch?v=biI9OFH6Nmg
寫 HTML
讓我們為該表編寫一些樣板 HTML 程式碼。
<table class="styled-table">
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dom</td>
<td>6000</td>
</tr>
<tr class="active-row">
<td>Melissa</td>
<td>5150</td>
</tr>
<!-- and so on... -->
</tbody>
</table>請注意，我們有兩個類別：
-
.styled-table這樣我們就不會竄改網站上的每個<table> -
.active-row將是「活動」行 - 這個類別用於突出顯示特定行並將獲得它自己的 CSS，我們很快就會看到
表格樣式
讓我們先定位主要的「<table>」元素：
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}其中大部分都是不言自明的，但讓我們來看看主要的：
-
box-shadow在桌子周圍加入微妙的透明陰影 -
border-collapse確保單元格邊框之間沒有空格
設定標題樣式
對於標題，我們可以簡單地更改背景顏色並對文字應用一些基本樣式：
.styled-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}移至表格儲存格
讓我們把事情分開一點：
.styled-table th,
.styled-table td {
padding: 12px 15px;
}以及表格行...
為此，我們要做三件事：
-
為每行新增下邊框進行分隔
-
每隔一行新增淺色背景以提高可讀性
-
在最後一行加上深色邊框以表示表格的結尾
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}最後，讓活動行看起來有所不同
為此，我們只需對文字進行更改：
.styled-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}就是這樣！ 如果您有任何改進建議，請在下面的回覆中告訴我 😁
立即報名👉 JavaScript DOM 速成課程
如果您正在學習 Web 開發，您可以在下面的連結中找到有關 JavaScript DOM 的完整課程👇
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章