表格 table


本篇为你介绍表格的HTML使用,你将通过内置的自定义属性对其进行风格的多样化设定。
丰富的按钮样式
表格样式class=""描述
不同尺寸的表格table-xs/ /lg/xl
table-xs/ /lg/xl
作用与 table
全表格对齐方式table-vt,table-vb默认
全表格居中对齐,横向左对齐,表头全居中
全表格横向对齐txt-c,txt-r作用与 table / thead / tbody / tr可进行全局排版,也可作用于td进行单独排版
行内不换行 keep-word根据需求作用于任意元素,但需根据实际情况加载
表格外框 table-border作用与 table,仅显示表格外框,一般是在下划线行使用,或者特设情况
边框标志 bordered 当表格需要边框时开启
表头背景 ths-blue white作用与table
表格td边框 tds-blue作用与 table
纯底线表格 table-line作用与 table
纯竖线表格 v作用与 table
隔行换色 striped-dp-l-blue作用与 table,只有浅色
鼠标滑过变色 hover-dp-l-orange作用与 table,只有浅色
单元格边框强调bord-l3 bord-l-blue作用与td
单元格图标 图标 默认顶部对齐
单元格元素
默认顶部对齐
单元格元素
默认顶部对齐
单元格按钮 删除 默认顶部对齐
单元格背景单独强调 编辑bg-blue深色,作用与td
横向表格
表格样式横向表格
表格样式表格样式表格样式
表格样式表格样式表格样式
表格样式表格样式表格样式
表格样式表格样式表格样式
表格样式表格样式表格样式
垂直表格
表格样式垂直表格
表格样式表格样式表格样式
表格样式表格样式表格样式
表格样式表格样式表格样式
表格样式表格样式表格样式
表格样式表格样式表格样式
手机端1像素表格
表格样式
class=""
描述
table-xs/ /lg/xl
table-xs/ /lg/xl
作用与 table
全表格对齐方式
table-vt,table-vb
默认
全表格居中对齐,横向左对齐,表头全居中
全表格横向对齐
txt-c,txt-r
作用与 table / thead / tbody / tr可进行全局排版,也可作用于td进行单独排版
行内不换行
keep-word
根据需求作用于任意元素,但需根据实际情况加载
表格外框
table-border
作用与 table,仅显示表格外框,一般是在下划线行使用,或者特设情况
边框标志
bordered
当表格需要边框时开启
表头背景
th-blue white
作用与table
表格td边框
td-blue
作用与 table
纯底线表格
table-line
作用与 table
纯竖线表格
v
作用与 table
隔行换色
striped-dp-l-blue
作用与 tbody,只有浅色
鼠标滑过变色
hover-dp-l-orange
作用与 table,只有浅色
单元格边框强调
bord-l3 bord-l-blue
作用与td
单元格图标
图标
默认顶部对齐
单元格元素
默认顶部对齐
单元格元素
默认顶部对齐
单元格按钮
删除
默认顶部对齐
bg-blue
深色,作用与td
手机端1像素单行下划线表格
表格样式
class=""
描述
table-xs/ /lg/xl
table-xs/ /lg/xl
作用与 table
table-xs/ /lg/xl
table-xs/ /lg/xl
作用与 table
table-xs/ /lg/xl
table-xs/ /lg/xl
作用与 table
table-xs/ /lg/xl
table-xs/ /lg/xl
作用与 table
table-xs/ /lg/xl
table-xs/ /lg/xl
作用与 table