使用CSS实现表格细边框的三种方式_html/css_WEB-ITnose
程序员文章站
2022-04-24 20:34:55
...
说到表格,虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。
由于操作表格的时候不可避免使用到细边框效果,所以我就整理了一下常用的三种实现细边框表格的方式,分享给大家,代码如下:
细边框表格的实现方式 Demo1
Title1 | Title2 | Title3 |
---|---|---|
Row1-01 | Row1-02 | Row1-03 |
Row2-01 | Row2-02 | Row2-03 |
Demo2
Title1 | Title2 | Title3 |
---|---|---|
Row1-01 | Row1-02 | Row1-03 |
Row2-01 | Row2-02 | Row2-03 |
Demo3
Title1 | Title2 | Title3 |
---|---|---|
Row1-01 | Row1-02 | Row1-03 |
Row2-01 | Row2-02 | Row2-03 |
效果图:
推荐阅读
-
.使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)_html/css_WEB-ITnose
-
使用ul和li实现的带有边框的方格效果代码_html/css_WEB-ITnose
-
.使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)_html/css_WEB-ITnose
-
使用ul和li实现的带有边框的方格效果代码_html/css_WEB-ITnose
-
使用CSS实现表格细边框的三种方式_html/css_WEB-ITnose
-
使用CSS实现表格细边框的三种方式_html/css_WEB-ITnose