Là chiều rộng của máng xối ngăn cách các hàng. Giá trị có liên quan đến kích thước của phần tử
định nghĩa chính thức
Giá trị ban đầu
row-gap =0Áp dụng cho các phần tử nhiều cột, bộ chứa linh hoạt, bộ chứa lướiInheritednoPercentages tham chiếu đến thứ nguyên tương ứng của vùng nội dung. Giá trị được tính toán như đã chỉ định, với s được đặt là tuyệt đối và tính toán thông thường bằng 0 ngoại trừ trên các phần tử nhiều cột. Kiểu hoạt hình có độ dài, tỷ lệ phần trăm hoặc calc[];
normal |
=
|
Nhiệm vụ hôm nay là tạo khoảng cách giữa hai hàng trong một bảng. Khoảng cách giữa hai hàng trong một có thể được thêm vào bằng cách sử dụng thuộc tính CSS border-spacing và border-collapse. Thuộc tính border-spacing được sử dụng để đặt khoảng cách giữa các ô của bảng và thuộc tính border-collapse chỉ định đường viền của bảng có bị thu gọn hay không. Thuộc tính khoảng cách đường viền chỉ có thể được sử dụng khi thuộc tính thu gọn đường viền được đặt thành "riêng biệt"
Hãy xem một ví dụ và chỉ ra cách thực hiện từng bước
- đặt
đánh dấu trong phần
- đặt
và
thẻ và viết một số nội dung trong đó
- đặt
W3docs
Row spacing in a table
Employee ID
Name
Gender
Age
10001
Tom
M
30
10002
Sally
F
28
10003
Emma
F
24
- Sử dụng thuộc tính thu gọn đường viền với giá trị "riêng biệt" cho bảng
- Sử dụng thuộc tính border-spacing để đặt khoảng cách giữa các đường viền của các ô trong bảng lân cận
- Đối với hàng đầu tiên, hãy đặt màu nền và màu của văn bản bằng cách sử dụng thuộc tính màu nền và màu
- Đặt chiều rộng và phần đệm của các hàng
- Sử dụng thuộc tính text-align với giá trị "center" để căn văn bản vào giữa
- Bạn có thể tạo đường viền xung quanh các ô của bảng bằng cách sử dụng thuộc tính đường viền và sử dụng thuộc tính độ rộng đường viền, kiểu đường viền và màu đường viền
- Bạn có thể thiết lập màu sắc của
thành phần của tài liệu bằng cách sử dụng thuộc tính color. Ngoài ra, bạn có thể chọn bất kỳ màu nào từ bộ chọn màu của chúng tôi
table {
border-collapse: separate;
border-spacing: 0 15px;
}
th {
background-color: #4287f5;
color: white;
}
th,
td {
width: 150px;
text-align: center;
border: 1px solid black;
padding: 5px;
}
h2 {
color: #4287f5;
}
Đây là kết quả của mã của chúng tôi
Title of the document
W3docs
Row spacing in a table
Employee ID
Name
Gender
Age
10001
Tom
M
30
10002
Sally
F
28
10003
Emma
F
24
Giãn cách hàng trong bảngID nhân viênNameGiới tínhTuổi10001TomM3010002SallyF2810003EmmaF24
Title of the document
W3docs
Row spacing in a table
Employee ID
Name
Gender
Age
10001
Tom
M
30
10002
Sally
F
28
10003
Emma
F
24
Trong ví dụ đầu tiên của chúng tôi, đối với thuộc tính khoảng cách đường viền, chúng tôi sử dụng giá trị "0 15px" có nghĩa là khoảng cách nằm giữa các hàng ngang. Trong ví dụ thứ hai, chúng tôi sử dụng giá trị "20px 0 " có nghĩa là khoảng cách nằm giữa các hàng dọc
Hãy cung cấp một số nền tảng cho bảng của chúng ta để xem chúng ta đang nói về điều gì, vì vậy
Và đây là kết quả
Điều gì xảy ra nếu chúng ta muốn xóa các đường viền bên trong giữa các cột trong ví dụ này?
Ok, chúng ta hãy cùng nhau sửa lỗi này
Xóa thu gọn đường viền. riêng biệt và khoảng cách biên giới. 20px 0 từ bảng CSS
Bây giờ, chúng tôi sẽ thêm khoảng cách đường viền. 20px 0 trên mỗi td của bảng của chúng tôi, thay vì toàn bộ bảng
Chúng ta cũng nên thêm một thuộc tính hiển thị của khối để nó hoạt động theo cách chúng ta muốn
Vì vậy, những thay đổi của chúng tôi sẽ như thế này
table {
background: khaki;
}
table tbody {
display: block;
border-spacing: 20px 0;
}
Kết quả sẽ giống như trước đây. Bây giờ, đã đến lúc chúng ta xóa không gian viền ngoài bên trái và bên phải. Nó có thể được thực hiện nhanh chóng bằng cách chỉ cần thêm lề âm vào bên trái và bên phải của mỗi phần tử td để nó sẽ xóa khoảng trống đó cho chúng tôi
Và ở đây chúng tôi đi. Đây chính xác là những gì chúng tôi muốn. Như bạn thấy, không gian bên trái và bên phải đã biến mất vĩnh viễn