a

Câu hỏi Đặt cellpadding và cellspacing trong 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?


2924
2017-12-04 08:45


gốc


Chỉ là một gợi ý chung, hãy kiểm tra xem style.css của bạn có thực hiện "đặt lại" trên các bảng của bạn hay không trước khi thử các giải pháp này. Ví dụ: Nếu bạn không có bảng được đặt thành width:auto sau đó border-collapse có thể không hoạt động như mong đợi. - PJ Brunet
Sử dụng khoảng cách đường viền trên bảng và đệm trên td. - Anubhav


Các câu trả lời:


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.


3227
2017-07-09 02:34



cellpadding = "0" vẫn có thể tạo sự khác biệt trong Chrome 13.0.782.215, ngay cả khi thu hẹp biên giới: thu gọn và giãn cách đường viền được áp dụng cho bảng. - Lee
@ LeeWhitney bạn cần đặt padding: 0 trên các ô của bảng. - Martin Ørding-Thomsen
Đó là một chút tắt chủ đề, nhưng các thuộc tính cellpadding và cellspacing được loại bỏ trong HTML5, vì vậy CSS là cách duy nhất để đi ngay bây giờ. - Ignas2526
Chào mọi người. Tôi đã cập nhật câu trả lời cho sự rõ ràng, bao gồm một phần trên cellpadding, mà tôi đã nghĩ là hiển nhiên (chỉ cần sử dụng "padding"). Hy vọng nó hữu ích hơn bây giờ. - Eric Nguyen
Đúng, @vapcguy, trong bất kỳ tình huống nào khác vô hạn mà bạn có thể tạo kiểu cho một bảng, bạn sẽ cần xác định các bộ chọn cụ thể hơn. Ở trên được đánh dấu là ví dụ. - Eric Nguyen


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

enter image description here

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

enter image description here

Cellspacing

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

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

enter image description here

Cả hai

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

enter image description here

Cả hai (đặc biệt)

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

enter image description here

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.


851
2018-06-12 10:24



Khoảng cách xung quanh bàn biến mất như thế nào? Khi tôi đặt "khoảng cách đường viền: 8px 12px, nó sẽ thêm khoảng cách không chỉ giữa, nhưng giữa đường viền bảng và các ô bên ngoài! Nhưng điều đó không được mô tả trong hình ảnh ở đây; - Kaz
@ 2astalavista Và thật không may nếu ai đó muốn ảnh hưởng của khoảng cách bên ngoài bị xóa, nó sẽ không hoạt động theo cách này với các thuộc tính CSS này. - Kaz
@ Kaz Bạn có thể cần sử dụng margin âm để che giấu phần khó chịu đó.
Đệm mặc định trên TD thường là 1px, không phải 0 - Jan M


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

313
2017-08-24 15:17



Đây thực sự là điều duy nhất tôi có thể làm việc cho tôi, mặc dù tôi đã áp dụng thông tin cho một id để tránh bị quá chung chung. - Kzqai
Đó là cellspacing=0 tương đương. Tương đương với cellspacing=1 hoàn toàn khác. Xem câu trả lời được chấp nhận. - TRiG
Không nên table td và table th đơn giản la td và th tương ứng? Nó hoạt động theo một trong hai cách, nhưng một bộ chọn nhỏ hơn có nghĩa là kết hợp nhanh hơn một chút - Cole Johnson
@ Thật ra, tôi nghĩ rằng nó nên được table > tr > td và table > tr > th. Điều này gần như nhanh như tr và thvà nó được đảm bảo hoạt động nếu bạn có một bảng lồng nhau. Chỉ 2c của tôi - aboveyou00
@ aboveyou00 nhưng là table bộ chọn cần thiết? IIRC, a <td> không hợp lệ trừ khi bên trong <tr>. - Cole Johnson


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


104
2017-12-04 09:18



Trong thời đại ngày nay, thực tế là hút đến mức độ thứ N. - John K
Điều này gần như chính xác, nhưng border-collapse chỉ hoạt động trong IE 5-7 nếu bảng chưa có cellspacing thuộc tính được xác định. Tôi đã viết một câu trả lời toàn diện để kết hợp tất cả các phần chính xác của các câu trả lời khác trên trang này trong trường hợp đó là hữu ích. - Eric Nguyen
Thành thật mà nói, ai quan tâm đến Internet Explorer? Bất cứ ai sử dụng nó nên biết các trang web bị hỏng của chúng lỗi - để sử dụng trình duyệt chất lượng thấp như vậy. Các trang web không cần phải giải quyết vấn đề này. Để Internet Explorer bị mất. Quên hỗ trợ cho nó. Chúng tôi không cần nó, và đó là một nỗi đau để phát triển. - Dev


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á.


84
2017-12-05 04:30



đối với những người cố gắng trả lời email, lưu ý rằng * không được công nhận bởi outlook 2007+ (sử dụng từ làm công cụ hiển thị) campaignmonitor.com/css - ptim


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

61
2017-08-20 03:32





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

44
2017-12-08 16:04





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.


40
2017-12-04 09:06





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.


33
2018-06-19 14:57



Tôi muốn tôi có thể upvote nhiều hơn ... Ví dụ đầu tiên mà không lặp lại những người khác và một trong đó cho thấy làm thế nào để giới hạn hiệu ứng cho một bảng duy nhất hoặc tế bào, thay vì tất cả chúng trên trang !!! - vapcguy