html實現帶斜線的表頭

2022-01-23 02:08:25 字數 1315 閱讀 3735

在html、jsp中經常用到table,但在table中如何實現標題**中畫斜線的操作呢?從網上查了很多資料,可以實現的方法有好幾種,現在提供一種簡單的操作方法,而且不用考慮解析度的問題,如圖:

方法如下:

該方法,實現的不是純粹的在table中畫斜線,而是實現兩種顏色的對比,實現出有斜線的感覺:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="generator"

content

="editplus®"

>

<

meta

name

="author"

content

="">

<

meta

name

="keywords"

content

="">

<

meta

name

="description"

content

="">

<

title

>document

title

>

<

style

>

/*對角錢矩形寬度為50,高度為100,分別對應border-top和border-left兩個屬性來設定

*/.d1

span

.s1.s2

style

>

head

>

<

body

>

<

div

class

="d1"

>

<

span

class

="s1"

>專業

span

>

<

span

class

="s2"

>專案

span

>

div>

body

>

html

>

參考:

採用CSS實現Html斜線表頭

使用 的時候,經常會用到斜線表頭,如下圖所示。網上搜到的方法,通常是利用js實現斜線繪製。參考 這種方式比較麻煩,要動用js,有點殺雞用牛刀的感覺。於是,想著通過css實現表頭斜線。原理很簡單,就是通過css3的background size屬性實現背景自適應填充。背景為乙個16px 16px的斜線...

css 實現 table斜線表頭

border left border right border top border bottom 能實現特殊形狀 資費標準 title style type text css table th,td th 模擬對角線 out b em assessdetail td style head body...

excel斜線表頭的製作

excel中,如何製作複雜的斜線表頭?斜線表頭,就是包含有斜線和文字的單元格。it部落窩給出方法,讓學習者少走彎路。利用直線和文字框工具,不管多複雜的斜線表頭,我們只要掌握了方法,都能迎刃而解。首先,我們給出所要製作的統計表,如下圖所示。第一步,輸入除了斜線以外的單元格的內容,並調整行列,編輯排版好...