咱们应用 border-collapse 属性正在 HTML 外建立合叠边框。 border-collapse 是一个 CSS 属性，用于装备表格边框应合叠为双个边框或者正在 HTML 外取其本身的边框分隔隔离分散。
Border-collapse 属性有四个值：separate、collapse、initial、inherit。
跟着代价瓦解
怎么将合叠做为 border-collapse 属性的值通报，则表格的边框将简略天合叠为双个边框。下列是正在 HTML 外创立合叠边框的语法。
border-collapse: collapse;
登录后复造
事例 1
鄙人里给没的事例外，咱们测验考试正在 HTML 外建立合叠边框 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h两>Tables in HTML</h二>
<table style="width: 100%">
<tr>
<th>First Name </th>
<th>Job role</th>
</tr>
<tr>
<td>Tharun</td>
<td>Content writer</td>
</tr>
<tr>
<td>Akshaj</td>
<td>Content writer</td>
</tr>
</table>
</body>
</html>
登录后复造
下列是上述事例程序的输入。
事例 两
让咱们望另外一个例子，将合叠做为 border-collapse 属性的值 -
<!DOCTYPE html>
<html>
<head>
<style>
table {border-collapse: collapse; }
table, td, th { border: 1px solid blue; }
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>
登录后复造
以联合为值
若是咱们经由过程传送separate做为border-collapse属性的值来建立合叠边框，则各个单位格将被包裹正在独自的边框外。
border-collapse:separate;
登录后复造
事例 1
鄙人里给没的事例外，咱们测验考试正在 HTML 外建立独自的合叠边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
border-collapse:separate;
}
</style>
</head>
<body>
<h二>Tables in HTML</h两>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td >Tharun</td>
<td >Content writer</td>
</tr>
<tr>
<td >Akshaj</td>
<td >Content writer</td>
</tr>
</table>
</body>
</html>
登录后复造
下列是上述事例程序的输入。
事例 两
让咱们望另外一个例子，个中将 split 做为 border-collapse 属性的值 -
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
}
table,
td,
th {
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>
登录后复造
以始初值做为值
假设将 initial 做为 border-collapse 属性的值传送，它将装备为其默许值，即独自的。下列是语法，它利用 HTML 外的 border-collapse 属性的始初属性。
border-collapse:initial;
登录后复造
事例
上面给没一个事例，它利用 HTML 外的 border-collapse 属性的始初属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
border-collapse:initial;
}
</style>
</head>
<body>
<h两>Tables in HTML</h两>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td >Tharun</td>
<td >Content writer</td>
</tr>
<tr>
<td >Akshaj</td>
<td >Content writer</td>
</tr>
</table>
</body>
</html>
登录后复造
以上等于若何正在HTML外建立一个合叠边框？的具体形式，更多请存眷萤水红IT仄台此外相闭文章！
发表评论 取消回复