表格table常见的边框设置和初步的立体效果

做网页时经常会遇到表格，常见的表格如下：

 1 <style type="text/css">
 2     .tbtest0
 3     { 4         width:500px;
 5         height:200px;
 6         border:1px solid #331067;
 7     }
 8     .tbtest0 td
 9     {10         border:1px solid #331067;
11     }
12     </style>
13
14
15 <table   class="tbtest0">
16 <tr><td></td><td></td><td></td></tr>
17 <tr><td></td><td></td><td></td></tr>
18 <tr><td></td><td></td><td></td></tr>
19 <tr><td></td><td></td><td></td></tr>
20 </table>

这样出来的效果是：

显然这并不是我们需要用的，需要增加样式让边框变成单线，常见的有3种方法：

方法1、通过table和td不同的背景色来设置：

 1  <style type="text/css">
 2     .tbtest1
 3     { 4         width:500px;
 5         height:200px;
 6         background:#7731DF;
 7
 8     }
 9     .tbtest1 td
10     {11         background:#fff;
12     }
13     </style>
14
15
16 <table  cellspacing="1"   class="tbtest1">
17 <tr><td></td><td></td><td></td></tr>
18 <tr><td></td><td></td><td></td></tr>
19 <tr><td></td><td></td><td></td></tr>
20 <tr><td></td><td></td><td></td></tr>
21 </table>

这里 cellspacing="1" 值为多少边框就会是多宽，看结果：

方法2、通过指定td的左边框和上边框 + table的右边框和下边框来实现：

 1 <style type="text/css">
 2      .tbtest2
 3     { 4         width:500px;
 5         height:200px;
 6         border-right:1px solid #F00;
 7         border-bottom:1px solid #F00;
 8     }
 9     .tbtest2 td
10     {11         border-left:1px solid #F00;
12         border-top:1px solid #F00
13     }
14     </style>
15
16
17 <table cellspacing="0" class="tbtest2">
18 <tr><td></td><td></td><td></td></tr>
19 <tr><td></td><td></td><td></td></tr>
20 <tr><td></td><td></td><td></td></tr>
21 <tr><td></td><td></td><td></td></tr>
22 </table>

这里要加上cellspacing="0" 不然tdd的右下角会接不上，效果：

方法3、通过table的border-collapse 来实现：

 1 <style type="text/css">
 2     .tbtest3
 3     { 4         width:500px;
 5         height:200px;
 6         border:1px solid #000;
 7         border-collapse:collapse;
 8     }
 9     .tbtest3 td
10     {11          border:1px solid #000;
12     }
13     </style>
14
15
16 <table  class="tbtest3">
17 <tr><td></td><td></td><td></td></tr>
18 <tr><td></td><td></td><td></td></tr>
19 <tr><td></td><td></td><td></td></tr>
20 <tr><td></td><td></td><td></td></tr>
21 </table>

这个不需要指定cellspacing，效果：

以上就是3种处理表格边框的方法，合理利用可以做出一些有意思的东西，比如方法2，可以做立体效果，我这里简单弄个，本人审美不怎么样，初略的展示下：

就像墙上的瓷砖，代码如下：

 1 <style>
 2     .tbtest4
 3     { 4         width:500px;
 5         height:300px;
 6         border-right:1px solid #C1C1C1;
 7         border-bottom:1px solid #C1C1C1;
 8         cellspacing:0;
 9         cellpadding:0;
10      }
11     .tbtest4 td
12     {13         border-left:3px solid #E9E9E9;
14         border-top:3px solid #E9E9E9;
15         border-right:2px solid #C1C1C1;
16         border-bottom:2px solid #C1C1C1;
17         background:#DDDDDB;
18     }
19
20
21     </style>
22
23 <table  cellspacing="0"  class="tbtest4">
24 <tr><td></td><td></td><td></td></tr>
25 <tr><td></td><td></td><td></td></tr>
26 <tr><td></td><td></td><td></td></tr>
27 <tr><td></td><td></td><td></td></tr>
28 </table>

好了   就这些  ~   （出不去了，字只能打这里）

转载于:https://www.cnblogs.com/mochen/p/3640273.html

表格table常见的边框设置和初步的立体效果相关推荐

POI处理PPT的表格table，XSLFTable样式设置
POI版本3.14 ppt中插入表格(table),是可以设置表格的样式的:抬头行有背景颜色,抬头行文字默认成白色,数据行分奇数偶数行有间隔背景色,这个样式是附加在表格元素上的,而不是加在行或者格子上 ...
HTML:表格table
表格: table属性:1) border: 设置表格和单元格的边框, 值为整数, 默认02) cellspacing: 设置单元格之间的间距, 默认23) cellpadding: 设置单元格的内边 ...
css表格文字不换行怎么设置？
很多时候,我们在项目开发中会出现,单元格内容由于太多导致的换行问题,让表格显得非常的丑陋.下面我们来看一下使用css设置表格内文字不换行的方法. css可以通过为表格table与td标签设置white ...
table 表格，table表格细边框设置，table表格禁止内容换行设置，table表格斑马线设置
table 表格,细边框设置,禁止内容换行设置,斑马线设置 1.没有设置时的样式 2.设置后的样式 3.html代码 <div class="cp-table">< ...
html表格中如何设置thtd的边框颜色,表格Table 的Th Td 标签设置背景颜色后边框消失如何解决？...
表格Table的Th Td标签在设置背景颜色后,设置的边框消失了,出现此情况主要是因为 [background]属性与 [position:relative;]同时使用的缘故. 解决方法:对Th T ...
css单线边框_HTML table表格边框设置为单线的方法
因为平时在html页面中设计表格样式时,一般都是使用 DIV+CSS 的方式来实现,很少使用 table 表格元素,而今天图省事使用 table 表格元素时,发现设置其边框为的样式为双线的形式,所以就 ...
html表格边框为void,将表格边框设置为THICK(Setting Table borders to THICK)
将表格边框设置为THICK(Setting Table borders to THICK) 我想创建一个厚边框的表格. 我一直在寻找一段时间,但似乎THICK风格不起作用. 如果我选择其他样式,例如D ...
html table表格大小写,HTML table表格边框设置为单线的方法
因为平时在html页面中设计表格样式时,一般都是使用 DIV+CSS 的方式来实现,很少使用 table 表格元素,而今天图省事使用 table 表格元素时,发现设置其边框为的样式为双线的形式,所以就 ...
html表格边框设置单线,border-collapse把table边框的样式设置成单线
table 默认的情况,如果给单元格,添加边框的时候.每个边框都会有自己的边框.这样看上去就出现了,类似的双边框情况.看上去一点也不美观,还是把边框设置成单线的时候,比较美观.table中有个bord ...

表格table常见的边框设置和初步的立体效果

表格table常见的边框设置和初步的立体效果相关推荐

最新文章

热门文章