如何實現單線邊框
一、導入
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代碼：
<style> table { border-right: 1px solid #000000; border-bottom: 1px solid #000000; text-align: center; } table th { border-left: 1px solid #000000; border-top: 1px solid #000000; } table td { border-left: 1px solid #000000; border-top: 1px solid #000000; } </style>
html代碼：
<body> <table align="center" width="400" cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成績</th> <th>操作</th> </tr> </thead> <tbody> <!-- 第1行 --> <tr> <td>小王</td> <td>高數</td> <td>98</td> <td> <a href="javascrpit:;">刪除</a> </td> </tr> <!-- 第2行 --> <tr> <td>小深</td> <td>高數</td> <td>86</td> <td> <a href="javascrpit:;">刪除</a></td> </tr> <!-- 第2行 --> <tr> <td>小濛</td> <td>高數</td> <td>65</td> <td><a href="javascript">刪除</a></td> </tr> </tbody> </table> </body>
效果圖：
【方法二】
核心思想：
1、給table設置css為border-collapse: collapse
2、設置所有td及th的css為border: 1px solid #000000;
css代碼：
<style>
table {
width: 400px; margin: 0 auto; border: 1px solid #000000; border-collapse: collapse; } th, td { border: 1px solid #000000; text-align: center; } </style>
html代碼：
<body> <table> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成績</th> <th>操作</th> </tr> </thead> <tbody> <!-- 第1行 --> <tr> <td>小王</td> <td>高數</td> <td>98</td> <td> <a href="javascrpit:;">刪除</a> </td> </tr> <!-- 第2行 --> <tr> <td>小深</td> <td>高數</td> <td>86</td> <td> <a href="javascrpit:;">刪除</a></td> </tr> <!-- 第2行 --> <tr> <td>小濛</td> <td>高數</td> <td>65</td> <td><a href="javascript">刪除</a></td> </tr> </tbody> </table> </body>
效果圖:
【方法三】
核心思想：
1、將table的屬性設置為：BORDER=0 、cellspacing=1 ；
2、設置table的背景色為即你要設置的table的邊框顏色；
3、設置所有td背景色為#ffffff白色；
css代碼
<style> table { background-color: black; text-align: center; } table th { background-color: #ffffff; } table td { background-color: #ffffff; } </style>
html代碼：
<body> <table width="400" cellspacing="1" border="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成績</th> <th>操作</th> </tr> </thead> <tbody> <!-- 第1行 --> <tr> <td>小王</td> <td>高數</td> <td>98</td> <td> <a href="javascrpit:;">刪除</a> </td> </tr> <!-- 第2行 --> <tr> <td>小深</td> <td>高數</td> <td>86</td> <td> <a href="javascrpit:;">刪除</a></td> </tr> <!-- 第2行 --> <tr> <td>小濛</td> <td>高數</td> <td>65</td> <td><a href="javascript">刪除</a></td> </tr> </tbody> </table> </body>
效果圖:
【表格屬性小結】
| 屬性名 | 屬性值 | 描述 |
| align | left、center、right | 規定表格相對周圍元素的對齊方式 |
| border | 1或0 | 規定表格是否有邊框默認無邊框 border="1"表示有邊框，意思給表格每一格加上1像素邊框 border="0"表示無邊框 |
| cellspacing | 像素值 | 規定單元格之間的空白，默認2px |
| cellpadding | 像素值 | 規定單元邊沿與其內容之間的空白區域，默認1px |
| width | 像素值或百分比 | 規定表格的寬度 |