Thuộc tính "border-collapse" được dùng để thiết lập đường viền(border) giữa các ô(cell border) và khung viền bảng(table border) của một bảng là dạng đơn là giữa các điền viền của bảng, các ô(cell) chỉ có 1 đường viền duy nhất, hoặc bị tách ra như trong dang chuẩn của HTML, tức là đường viền của bảng và đường viền giữa các ô là riêng biệt.
Trong border-collapse ta có hai thông số như sau:
Bạn có thể theo dõi ví dụ sau để hiểu rõ hơn về tinh chất và cách hiển thị của hai thông số trên:
Trong border-collapse ta có hai thông số như sau:
- separate: đường viền riêng biệt, đây là thông mặc định.
- collapse: đường viền đơn duy nhất.
Bạn có thể theo dõi ví dụ sau để hiểu rõ hơn về tinh chất và cách hiển thị của hai thông số trên:
<html lang="en">
<head>
<title>CSS - Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div {
width: 100%;
}
#myTable_01 table {
width: 100%;
}
#myTable_01 table, th, td {
border: 1px solid black;
border-collapse: separate;
}
#myTable_01 th, td {
padding: 5px;
}
#myTable_02 table {
width: 100%;
}
#myTable_02 table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#myTable_02 th, td {
padding: 5px;
}
</style>
</head>
<body>
<h1>Table 01</h1>
<div id="myTable_01">
<table>
<tbody>
<tr>
<td>A table cell 1</td>
<td>A table cell 2</td>
<td>A table cell 3</td>
</tr>
<tr>
<td>A table cell 1</td>
<td>A table cell 2</td>
<td>A table cell 3</td>
</tr>
</tbody>
</table>
</div>
<br />
<h1>Table 02</h1>
<div id="myTable_02">
<table>
<tbody>
<tr>
<td>A table cell 1</td>
<td>A table cell 2</td>
<td>A table cell 3</td>
</tr>
<tr>
<td>A table cell 1</td>
<td>A table cell 2</td>
<td>A table cell 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<head>
<title>CSS - Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div {
width: 100%;
}
#myTable_01 table {
width: 100%;
}
#myTable_01 table, th, td {
border: 1px solid black;
border-collapse: separate;
}
#myTable_01 th, td {
padding: 5px;
}
#myTable_02 table {
width: 100%;
}
#myTable_02 table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#myTable_02 th, td {
padding: 5px;
}
</style>
</head>
<body>
<h1>Table 01</h1>
<div id="myTable_01">
<table>
<tbody>
<tr>
<td>A table cell 1</td>
<td>A table cell 2</td>
<td>A table cell 3</td>
</tr>
<tr>
<td>A table cell 1</td>
<td>A table cell 2</td>
<td>A table cell 3</td>
</tr>
</tbody>
</table>
</div>
<br />
<h1>Table 02</h1>
<div id="myTable_02">
<table>
<tbody>
<tr>
<td>A table cell 1</td>
<td>A table cell 2</td>
<td>A table cell 3</td>
</tr>
<tr>
<td>A table cell 1</td>
<td>A table cell 2</td>
<td>A table cell 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No comments:
Post a Comment