本文将演示如何使用HTML和CSS来对表格进行操作,实现表格细线的方式
table表格边框原始图示:

代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>宗波尘客-table细线表格效果</title>
<style>
table {
border: 1px solid red;
height: 300px;
width: 300px;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>在HTML上实现细线表格:
方法一:在table表格上加cellspacing="0",使表格线内折叠
代码:
<table cellspacing="0"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
效果:

方法二:在表格上加rules="all"
代码:
<table rules="all"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
效果图:

在CSS里实现table表格细线:
在CSS里添加border-collapse:collapse;
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>宗波尘客-table细线表格效果</title>
<style>
table {
border: 1px solid red;
height: 300px;
width: 300px;
}
td {
border: 1px solid red;
}
table,
td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>效果图:
