當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html的斜表头设置

發布時間：2024/1/8 编程问答 24 豆豆

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

斜表頭是表格中很常用的技術，有多種實現方案，在這里介紹一種簡單的。
1.準備一個普通的表；

<!doctype html> <html> <head> <meta charset="utf-8"> <title>斜表頭</title><style>table,td,th{border:solid 1px black;border-collapse: collapse;text-align: center;}th{width:100px;height: 30px}</style> </head><body> <table><tr><th></th><th></th><th></th><th></th></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr></table> </body> </html>

2.給第一個格子里面寫入兩個span元素（可以寫其他的元素），然后給span加上上邊框，并設置旋轉：
這是給第一個格子加上span元素：

這是兩個span元素的css：

.span1{ border-top:solid black 1px;width:67px;position:absolute;/*絕對定位*/left: 0px;top: 0px;transform: rotate(30deg);/*旋轉度數30度*/transform-origin: left top; /*旋轉基點為左上角*/}.span2{border-top:solid black 1px;width:105px;position:absolute;/*絕對定位*/left: 0px;top: 0px;transform: rotate(10deg);/*旋轉度數10度*/transform-origin: left top; /*旋轉基點為左上角*/}

可以通過設置上面css代碼的width更改斜線的長度，設置transform的rotate值更改旋轉度數等等。
注意：由于旋轉時設置的是絕對定位，所以要給table設置一個定位，否則斜線的基點就可能不在表格左上角。（不懂相對定位和絕對定位可以去鏈接學習）
這是table定位的css：

table{position:relative;left: 197px;top: 0px;}

這就成功設置了斜表頭。

原理：
我們可以設置一下span1的背景顏色：
旋轉之前：

旋轉之后：

可以看到其實旋轉的是span塊，我們通過僅設置span上邊框就可以達到斜線的效果了。

總結

以上是生活随笔為你收集整理的html的斜表头设置的全部內容，希望文章能夠幫你解決所遇到的問題。

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

html
表头