Thuộc tính border-spacing

Thuộc tính border-spacing

Thuộc tính border-spacing xác định khoảng cách giữa các đường viền của table. Chú ý là thuộc tính border-spacing chỉ được sử dụng cho thành phần table có các đường viền tách biệt nhau (border-collapse: separate).

Cấu trúc

table {
    border-spacing: giá trị;
}

Với giá trị như sau:

Thuộc tínhgiá trịVí dụMô tả
border-spacingđộ rộngborder-spacing: 10px;Độ rộng giữa các đường viền (border) của table.
ngang dọcborder-spacing: 10px 20px;Độ rộng giữa các đường viền (border) của table với giá trị ngang và dọc.
inheritborder-collapse: inherit;Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head>head>
<body>
<table border="1">
<tr>
<th>Thu haith>
<th>Thu bath>
tr>

<tr>
<td>2000dtd>
<td>5000dtd>
tr>

<tr>
<td>500dtd>
<td>4000dtd>
tr>
table>
body>
html>

Hiển thị trình duyệt khi chưa có CSS:

Thu haiThu ba
2000d5000d
500d4000d

border-spacing với một giá trị, CSS viết:

table {
    border-spacing: 10px; 
}

Hiển thị trình duyệt khi có CSS:

Thu haiThu ba
2000d5000d
500d4000d

border-spacing với 2 giá trị, CSS viết:

table {
    border-spacing: 10px 30px; 
}
Thu haiThu ba
2000d5000d
500d4000d

Trình duyệt hỗ trợ

Thuộc tính border-spacing 1

Thuộc tính border-spacing được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không được hỗ trợ trong trình duyệt Internet Explorer, bao gồm cả IE9.

Bình luận