如何实现单线边框
一、导入
table表格添加边框后，它的默认效果如下：
table {
width: 400px;
}
table,
table td,
table th {
border: 1px solid #000000;
}
二、解决方案（3种方法）
【方法一】
核心思想：
1、设置BORDER=0 ；
2、再通过CSS，给Table加上1px的border-top,border-left；
3、然后再设置所有的td的border-right,border-bottom；
css代码：
html代码：
| 姓名 | 科目 | 成绩 | 操作 |
|---|---|---|---|
| 小王 | 高数 | 98 | |
| 小深 | 高数 | 86 | 删除 |
| 小濛 | 高数 | 65 | 删除 |
效果图：
【方法二】
核心思想：
1、给table设置css为border-collapse: collapse
2、设置所有td及th的css为border: 1px solid #000000;
css代码：
html代码：
| 姓名 | 科目 | 成绩 | 操作 |
|---|---|---|---|
| 小王 | 高数 | 98 | |
| 小深 | 高数 | 86 | 删除 |
| 小濛 | 高数 | 65 | 删除 |
效果图:
【方法三】
核心思想：
1、将table的属性设置为：BORDER=0 、cellspacing=1 ；
2、设置table的背景色为即你要设置的table的边框颜色；
3、设置所有td背景色为#ffffff白色；
css代码
html代码：
| 姓名 | 科目 | 成绩 | 操作 |
|---|---|---|---|
| 小王 | 高数 | 98 | |
| 小深 | 高数 | 86 | 删除 |
| 小濛 | 高数 | 65 | 删除 |
效果图:
【表格属性小结】
属性名
属性值
描述
align
left、center、right
规定表格相对周围元素的对齐方式
border
1或0
规定表格是否有边框默认无边框
border="1"表示有边框，意思给表格每一格加上1像素边框
border="0"表示无边框
cellspacing
像素值
规定单元格之间的空白，默认2px
cellpadding
像素值
规定单元边沿与其内容之间的空白区域，默认1px
width
像素值或百分比
规定表格的宽度