當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS表格样式

發布時間：2023/12/10 CSS 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS表格样式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS表格樣式

1.表格標題位置

caption-side:取值;

top 頂部（默認值）
bottom 底部

在table/caption元素中定義。

2.表格邊框合并

border-collapse:取值;

seperate 分離（默認值）
collapse 合并

在table元素中定義。

3.表格邊框間距

border-spacing:像素值;

在table元素中定義。

例：

<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title></title><style type="text/css">table,th,td{border:1px solid silver;}table{border-spacing: 8px;border-collapse: collapse;caption-side: bottom;}</style> </head> <body><table><caption>表格標題</caption><thead><tr><th>表頭單元格1</th><th>表頭單元格2</th></tr></thead><tbody><tr><td>表行單元格1</td><td>表行單元格2</td></tr><tr><td>表行單元格3</td><td>表行單元格4</td></tr></tbody><tfoot><tr><td>表行單元格5</td><td>表行單元格6</td></tr></tfoot></table> </body> </html>

效果：

總結

以上是生活随笔為你收集整理的CSS表格样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。