Theo như tôi biết, lề phải là vô dụng đối với bảng, bạn có thể sử dụng phần đệm bên trái. 150px. Thuộc tính này sẽ thêm không gian vào các cột cụ thể. Đây là mã mẫu
Label Label style="border-collapse:separate; border-spacing:150px 0;"
Trân trọng,
Eric Du
Trong bài viết này, chúng ta sẽ hiểu cách thêm khoảng cách giữa hai hàng trong bảng bằng CSS với các ví dụ khác nhau. Chúng ta có thể thêm khoảng cách giữa hai hàng trong một bảng bằng cách sử dụng thuộc tính CSS như border-spacing và border-collapse. Chúng ta có thể thêm cả khoảng cách ngang và dọc giữa các hàng
Sau đây là các ví dụ về cách thêm Khoảng trắng giữa hai hàng trong bảng bằng CSS
ví dụ 1
Giải trình
Trong ví dụ trên, chúng tôi đã tạo một ví dụ về cách thêm khoảng cách giữa hai hàng của bảng bằng cách sử dụng CSS. Trong, chúng tôi đã thêm khoảng trắng giữa tiêu đề bảng và thân bảng
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