Đặt di động và không gian di động trong CSS?

Trong bảng HTML, cellpaddingvà cellspacingcó thể được đặt như thế này:

<table cellspacing="1" cellpadding="1">

Làm thế nào cùng có thể được thực hiện bằng CSS?

Khái niệm cơ bản

Để kiểm soát "cellpadding" trong CSS, bạn chỉ cần sử dụng paddingtrên các ô của bảng. Ví dụ: 10px của "cellpadding":

td { 
    padding: 10px;
}

Đối với "không gian di động", bạn có thể áp dụng thuộc tính border-spacingCSS cho bảng của mình. Ví dụ: 10px của "không gian di động":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Khách sạn này thậm chí sẽ cho phép khoảng cách ngang và dọc riêng biệt, điều mà bạn không thể làm với "không gian di động" của trường học cũ.

Các vấn đề trong IE <= 7

Điều này sẽ hoạt động trong hầu hết tất cả các trình duyệt phổ biến ngoại trừ Internet Explorer cho đến Internet Explorer 7, nơi bạn sắp hết may mắn. Tôi nói "gần như" bởi vì các trình duyệt này vẫn hỗ trợ thuộc border-collapsetính, hợp nhất các đường viền của các ô của bảng liền kề. Nếu bạn đang cố gắng loại bỏ không gian di động (nghĩa là cellspacing="0") , thì border-collapse:collapsesẽ có tác dụng tương tự: không có khoảng cách giữa các ô của bảng. Tuy nhiên, sự hỗ trợ này có lỗi, vì nó không ghi đè một cellspacingthuộc tính HTML hiện có trên thành phần bảng.

Nói tóm lại: đối với các trình duyệt không có Internet Explorer 5-7, border-spacingsẽ xử lý bạn. Đối với Internet Explorer, nếu tình huống của bạn vừa phải (bạn muốn 0 ô không gian 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 ý: Để biết tổng quan tuyệt vời về các thuộc tính CSS mà người ta 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 này .

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

Bàn di động

Đặt lượng không gian giữa nội dung của ô và thành ô

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

Không gian di động

Kiểm soát không gian giữa các ô của 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;}

Lưu ý: Nếu có border-spacingtập hợp, nó cho biết border-collapsethuộc tính của bảng là separate.

Hãy tự 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 ô của bảng không thực sự có tác dụng như tôi biết. Tương đương CSS thực sự cellspacinglà border-spacing- nhưng nó không hoạt động trong Internet Explorer.

Bạn có thể sử dụng border-collapse: collapseđể đặt khoảng cách ô một cách đáng tin cậy thành 0 như đã đề cập, nhưng đối với bất kỳ giá trị nào khác tôi nghĩ cách duy nhất trên trình duyệt chéo là tiếp tục sử dụng cellspacingthuộ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 *tuyên bố là dành cho Internet Explorer 6 và 7, và các trình duyệt khác đúng cách sẽ bỏ qua nó.

expression('separate', cellSpacing = '10px')trả về 'separate', nhưng cả hai câu lệnh đều được chạy, vì trong JavaScript, bạn có thể truyề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ị không gian di động khác không, CSS sau đây hoạt động với tôi, nhưng tôi chỉ có thể kiểm tra nó trong Firefox.

Xem liên kết Quirksmode được đăng ở nơi khác để biết chi tiết tương thích. Có vẻ 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: collapsevào biểu tableđịnh kiểu của bạn .

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 bọc mọi ô trong một cột để có được hiệu ứng thống nhất. Ví dụ: để có được lề trái & 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. Vâng, nó hoạt động với Internet Explorer. Trên thực tế, tôi chỉ thử nghiệm điều này với Internet Explorer, vì đó là tất cả những gì chúng tôi được phép sử dụng tại nơi làm việc.

Chỉ cần sử dụng border-collapse: collapsecho bảng của bạn, và paddingcho thhoặc td.

Phong cách này là dành cho thiết lập lại đầy đủ cho các bảng - cellpadding , cellspacing và biên giới .

Tôi đã có phong cách này trong tập tin reset.css của mình:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

TBH. Đối với tất cả các fannying xung quanh với CSS, bạn có thể chỉ cần sử dụngcellpadding="0" cellspacing="0" vì chúng không bị phản đối ...

Bất cứ ai khác đề xuất lợi nhuận trên <td>rõ ràng đã không thử điều này.

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

Chỉ cần sử dụng quy tắc đệm CSS với dữ liệu bảng:

td { 
    padding: 20px;
}

Và cho khoảng cách biên giới:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Tuy nhiên, nó có thể tạo ra sự cố trong phiên bản cũ hơn của các trình duyệt như Internet Explorer do việc triển khai mô hình hộp khác nhau.

Theo những gì tôi hiểu từ các phân loại của W3C thì đó <table>là ý nghĩa cho việc hiển thị dữ liệu 'chỉ'.

Dựa vào đó tôi thấy việc tạo một <div>nền với tất cả các nền và tất cả những thứ đó đều dễ dàng hơn rất nhiều và có một bảng với dữ liệu nổi trên đó bằng cách sử dụng position: absolute;và background: transparent;...

Nó hoạt động trên Chrome, Internet Explorer (6 trở lên) và Mozilla Firefox (2 trở lên).

Lợi nhuận được sử dụng (hoặc có nghĩa anyways) để tạo ra một spacer giữa các yếu tố container, như <table>, <div>và <form>, không <tr>, <td>, <span>hoặc <input>. Sử dụng nó cho bất cứ điều gì khác ngoài các yếu tố trong thùng chứa sẽ khiến bạn bận rộn điều chỉnh trang web của mình để cập nhật trình duyệt trong tương lai.

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Bạn có thể dễ dàng đặt phần đệm bên trong các ô của bảng bằng cách sử dụng thuộc tính phần đệm CSS. Đây là một cách hợp lệ để tạo hiệu ứng tương tự như thuộc tính di động của bảng.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Tương tự, bạn có thể sử dụng thuộc tính khoảng cách viền CSS để áp dụng khoảng cách giữa các đường viền ô của bảng liền kề như thuộc tính không gian ô. Tuy nhiên, để làm việc cách nhau biên giới, giá trị của các thuộc tính sụp đổ biên giới được tách biệt, đó là mặc định.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Thử cái này:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Hoặc thử điều này:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

Tôi đã sử dụng !importantsau khi sụp đổ biên giới như

border-collapse: collapse !important;

và nó hoạt động với tôi trong IE7. Nó dường như ghi đè lên thuộc tính không gian.

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingcó thể được đưa ra bằng paddingCSS trong khi cell-spacingcó thể được đặt bằng cách đặt border-spacingcho bảng.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle .

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

Nếu marginkhông làm việc, hãy cố gắng thiết lập displaycủa trđể blockvà sau đó lợi nhuận sẽ làm việc.

Đối với các bảng, không gian di động và ô di động đã lỗi thời trong HTML 5.

Bây giờ đối với không gian di động, bạn phải sử dụng khoảng cách viền. Và đối với di động, bạn phải sử dụng thu gọn viền.

Và đảm bảo bạn không sử dụng mã này trong mã HTML5 của mình. Luôn cố gắng sử dụng các giá trị này trong tệp CSS 3.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

Trong bảng HTML, cellpaddingvà cellspacingcó thể được đặt như thế này:

Đối với đệm tế bào :

Chỉ cần gọi td/thdi động đơn giản padding.

Thí dụ:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

Dành cho khoảng cách ô

Chỉ cần gọi đơn giản table border-spacing

Thí dụ:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

Thêm kiểu bảng theo liên kết nguồn CSS ở đây bạn có thêm kiểu bảng bằng CSS .

Bạn có thể chỉ cần làm một cái gì đó như thế này trong CSS của mình, sử dụng border-spacingvà padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

Làm thế nào về việc thêm phong cách trực tiếp vào bảng? Đây là thay vì sử dụng tabletrong CSS của bạn, đây là cách tiếp cận BAD nếu bạn có nhiều bảng trên trang của mình:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Tôi đề nghị điều này và tất cả các ô cho bảng cụ thể được thực hiện.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Bạn có thể kiểm tra mã dưới đây chỉ cần tạo một index.htmlvà chạy nó.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

ĐẦU RA: