Thuộc tính border-spacing

Thuộc tính border-spacing xác định khoảng cách giữa các ô td hoặc các ô th của bảng HTML (và giữa đường viền của ô và chính bảng). Giá trị của thuộc tính là bất kỳ đơn vị kích thước nào, ngoại trừ phần trăm.

Cú pháp

bộ chọn {
	border-spacing: một hoặc hai giá trị;
}

Giá trị

Giá trị	Mô tả
một giá trị	Một giá trị xác định khoảng cách bằng nhau giữa các ô theo chiều dọc và theo chiều ngang.
hai giá trị	Giá trị đầu tiên xác định khoảng cách theo chiều ngang, và giá trị thứ hai xác định khoảng cách theo chiều dọc.

Giá trị mặc định: 0. Tuy nhiên, mỗi trình duyệt có giá trị khác 0 của riêng mình cho thuộc tính cellspacing, vì vậy theo mặc định bạn sẽ thấy khoảng cách giữa các ô.

Lưu ý

Áp dụng thuộc tính cho các bảng, không phải cho các ô của nó (sẽ không hoạt động cho các ô).

Không thể đạt được hiệu ứng tương tự bằng cách sử dụng margin, vì margin không hoạt động cho các ô bảng.

Nếu thuộc tính border-collapse được đặt thành giá trị collapse - border-spacing sẽ không hoạt động.

Ví dụ . Một giá trị

Hãy tạo khoảng cách giữa các ô (và giữa ô và đường viền bảng) là 10px:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Ví dụ . Hai giá trị

Và bây giờ hãy tạo khoảng cách là 10px theo chiều ngang và 30px theo chiều dọc:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px 30px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Ví dụ . Đặt border-collapse: collapse

Nhưng bây giờ border-spacing sẽ không hoạt động do thuộc tính border-collapse được đặt thành giá trị collapse:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	border-spacing: 10px 30px;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}