Câu hỏi Đặt cellpadding và cellspacing trong CSS?

Mặc định

Hành vi mặc định của trình duyệt tương đương với:

table {border-collapse: collapse;}
td    {padding: 0px;}

Cellpadding

Đặ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;}

Cellspacing

Kiểm soát không gian giữa các ô bảng

table {border-spacing: 2px;}
td    {padding: 0px;}

Cả hai

table {border-spacing: 2px;}
td    {padding: 6px;}

Cả hai (đặc biệt)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Chú thích: Nếu đó là border-spacing thiết lập, nó cho biết border-collapse tài sản của bảng là separate.

Hãy tự mình thử!

Đâ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.