Trong bảng HTML, cellpadding
và cellspacing
có thể được thiết lập như thế này:
<table cellspacing="1" cellpadding="1">
Làm thế nào có thể cùng được thực hiện bằng cách sử dụng CSS?
Trong bảng HTML, cellpadding
và cellspacing
có thể được thiết lập như thế này:
<table cellspacing="1" cellpadding="1">
Làm thế nào có thể cùng được thực hiện bằng cách sử dụng CSS?
Khái niệm cơ bản
Để kiểm soát "cellpadding" trong CSS, bạn chỉ cần sử dụng padding
trên các ô của bảng. Ví dụ. cho 10px "cellpadding":
td {
padding: 10px;
}
Đối với "cellspacing", bạn có thể áp dụng border-spacing
Thuộc tính CSS cho bảng của bạn. Ví dụ. cho 10px "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
Tài sản này thậm chí sẽ cho phép khoảng cách ngang và dọc riêng biệt, một cái gì đó bạn không thể làm với "cellspacing" trường học cũ.
Các vấn đề trong IE <= 7
Điều này sẽ làm việc trong hầu như tất cả các trình duyệt phổ biến ngoại trừ Internet Explorer thông qua Internet Explorer 7, nơi bạn gần như không may mắn. Tôi nói "gần như" vì các trình duyệt này vẫn hỗ trợ border-collapse
thuộc tính, kết hợp các đường viền của các ô bảng liền kề. Nếu bạn đang cố gắng loại bỏ cellspacing (nghĩa là, cellspacing="0"
) sau đó border-collapse:collapse
nên có cùng tác dụng: không có khoảng trống giữa các ô bảng. Tuy nhiên, sự hỗ trợ này là lỗi, vì nó không ghi đè lên hiện tại cellspacing
Thuộc tính HTML trên phần tử bảng.
Tóm lại: đối với các trình duyệt không phải là Internet Explorer 5-7, border-spacing
xử lý bạn. Đối với Internet Explorer, nếu tình huống của bạn là vừa phải (bạn muốn 0 khoảng trống và bảng của bạn chưa được xác định), bạn có thể sử dụng border-collapse:collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Lưu ý: Để có tổng quan tuyệt vời về các thuộc tính CSS mà người dùng có thể áp dụng cho các bảng và cho trình duyệt nào, hãy xem trang Quirksmode tuyệt vời.
Hành vi mặc định của trình duyệt tương đương với:
table {border-collapse: collapse;}
td {padding: 0px;}
Đặt lượng không gian giữa các nội dung của ô và thành tế bào
table {border-collapse: collapse;}
td {padding: 6px;}
Kiểm soát không gian giữa các ô bảng
table {border-spacing: 2px;}
td {padding: 0px;}
table {border-spacing: 2px;}
td {padding: 6px;}
table {border-spacing: 8px 2px;}
td {padding: 6px;}
Chú thích: Nếu đó là
border-spacing
thiết lập, nó cho biếtborder-collapse
tài sản của bảng làseparate
.
Đây bạn có thể tìm thấy cách html cũ để đạt được điều này.
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
Đặt lề trên các ô bảng không thực sự có bất kỳ tác dụng nào theo như tôi biết. Tương đương CSS thực cho cellspacing
Là border-spacing
- nhưng nó không hoạt động trong Internet Explorer.
Bạn có thể dùng border-collapse: collapse
để đặt khoảng cách ô thành 0 như được đề cập một cách đáng tin cậy, nhưng đối với bất kỳ giá trị nào khác, tôi cho rằng cách duy nhất giữa các trình duyệt là tiếp tục sử dụng cellspacing
thuộc tính.
Bản hack này hoạt động cho Internet Explorer 6 trở lên, Google Chrome, Firefox và Opera:
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
Các *
khai báo dành cho Internet Explorer 6 và 7 và các trình duyệt khác sẽ bỏ qua nó đúng cách.
expression('separate', cellSpacing = '10px')
trả về 'separate'
, nhưng cả hai câu lệnh đều chạy, như trong JavaScript, bạn có thể chuyển nhiều đối số hơn dự kiến và tất cả chúng sẽ được đánh giá.
Đối với những người muốn có giá trị cellspacing khác không, CSS sau đây đã làm việc cho tôi, nhưng tôi chỉ có thể kiểm tra nó trong Firefox. Xem Chế độ quirks liên kết đã đăng ở nơi khác để biết chi tiết về tính tương thích. Dường như nó có thể không hoạt động với các phiên bản Internet Explorer cũ hơn.
table {
border-collapse: separate;
border-spacing: 2px;
}
Giải pháp đơn giản cho vấn đề này là:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
Ngoài ra, nếu bạn muốn cellspacing="0"
đừng quên thêm border-collapse: collapse
trong của bạn table
's stylesheet.
Bọc nội dung của ô bằng một div và bạn có thể làm bất cứ điều gì bạn muốn, nhưng bạn phải quấn mọi ô trong một cột để có được một hiệu ứng đồng nhất. Ví dụ, để có được lề trái và lề phải rộng hơn:
Vì vậy, CSS sẽ là,
div.cellwidener {
margin: 0px 15px 0px 15px;
}
td.tight {
padding: 0px;
}
<table border="0">
<tr>
<td class="tight">
<div class="cellwidener">My content</div>
</td>
</tr>
</table>
Vâng, đó là một rắc rối. Có, nó hoạt động với IE. Trong thực tế, tôi đã chỉ thử nghiệm điều này với IE, bởi vì đó là tất cả chúng tôi được phép sử dụng tại nơi làm việc.