有关<table>的几个问题
1)实现任意一行下边框的颜色设置:
- 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
- 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离
实现的效果为:
html代码:
<!DOCTYPE html> <html> <head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <title>商品管理后台首页</title> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <table cellpadding="5px" cellspacing="0"> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr class="first-row"> <td>ws</td><td>ws</td><td>ws</td> </tr> <tr> <td>ws</td><td>ws</td><td>ws</td> </tr> </table> </body> </html>
对应的less为:
table{ th{ border-bottom: 1px solid grey; } .first-row{ /*设置该tr中td的边框颜色,要注意的是在html中设置cellspacing="0"*/ td{ border-bottom: 1px solid red; } } }
由于cellspacing设置的是td与td之间的距离,如果将cellspacing=10px;cellpadding=0px;则效果为:
2)当给<tr>标签设置为display:block;时,可以设置<tr>的高度和宽度以及边框,以及上下边距。且此时每行的<td>可以设置不同的百分比宽度,如
<table cellpadding="0px" cellspacing="0px"> <tr> <th width="20%">1</th><th width="40%">2</th><th width="60%">3</th> </tr> <tr class="first-row"> <td width="20%">ws</td><td width="60%">ws</td><td width="20%">ws</td> </tr> <tr> <td width="40%">ws</td><td width="40%">ws</td><td width="20%">ws</td> </tr> </table>
此外,由于设置<td>边框时,会导致左右边框重合,边框变粗,所以应该只设置一侧边框border-left:
3)几个使用的特性:
border-collapse:collapse;//属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示(separate)。
empty-cells: show;//属性设置是否显示表格中的空单元格(仅用于“分离边框”模式,即border-collapse:separate)。