ตั้งค่าการแบ่งเซลล์และการเว้นวรรคใน CSS หรือไม่

ในตาราง HTML cellpaddingและcellspacingสามารถตั้งค่าดังนี้:

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

วิธีเดียวกันสามารถทำได้โดยใช้ CSS?

ข้อมูลพื้นฐานเกี่ยวกับ

สำหรับการควบคุม "การสร้างเซลล์" ใน CSS คุณสามารถใช้paddingกับเซลล์ตารางได้ เช่นสำหรับ 10px ของ "cellpadding":

td { 
    padding: 10px;
}

สำหรับ "cellspacing" คุณสามารถใช้border-spacingคุณสมบัติ CSS กับตารางของคุณ เช่นสำหรับ 10px ของ "cellspacing":

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

คุณสมบัตินี้จะอนุญาตให้มีการเว้นวรรคแนวนอนและแนวตั้งแยกจากกันสิ่งที่คุณไม่สามารถทำได้ด้วย "cellspacing" ของโรงเรียนเก่า

ปัญหาใน IE <= 7

วิธีนี้จะทำงานในเบราว์เซอร์ยอดนิยมเกือบทั้งหมดยกเว้น Internet Explorer จนถึง Internet Explorer 7 ซึ่งคุณเกือบจะไม่มีโชค ฉันพูดว่า "เกือบ" เพราะเบราว์เซอร์เหล่านี้ยังคงสนับสนุนborder-collapseคุณสมบัติซึ่งผสานเส้นขอบของเซลล์ตารางที่อยู่ติดกัน หากคุณพยายามกำจัดระยะห่างระหว่างเซลล์(กล่าวคือcellspacing="0") border-collapse:collapseควรมีผลกระทบเดียวกัน: ไม่มีช่องว่างระหว่างเซลล์ตาราง การสนับสนุนนี้เป็นแบบบั๊กเนื่องจากจะไม่แทนที่cellspacingคุณลักษณะ HTML ที่มีอยู่ในองค์ประกอบตาราง

กล่าวโดยย่อ: สำหรับเบราว์เซอร์ที่ไม่ใช่ Internet Explorer 5-7 border-spacingจัดการคุณ สำหรับ Internet Explorer ถ้าสถานการณ์ของคุณเป็นเพียงขวา (คุณต้องการ 0 cellspacing และโต๊ะของคุณไม่ได้มันกำหนดไว้แล้ว) border-collapse:collapseคุณสามารถใช้

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

หมายเหตุ: สำหรับภาพรวมที่ดีของคุณสมบัติ CSS ที่หนึ่งสามารถนำไปใช้กับตารางและที่เบราว์เซอร์เห็นนี้หน้า quirksmode ที่ยอดเยี่ยม

ค่าเริ่มต้น

พฤติกรรมเริ่มต้นของเบราว์เซอร์เทียบเท่ากับ:

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

cellpadding

ตั้งค่าจำนวนช่องว่างระหว่างเนื้อหาของเซลล์และผนังเซลล์

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

Cellspacing

ควบคุมช่องว่างระหว่างเซลล์ตาราง

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

ทั้งสอง

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

ทั้งสอง (พิเศษ)

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

หมายเหตุ:หากมีborder-spacingการตั้งค่าก็แสดงทรัพย์สินของตารางเป็นborder-collapseseparate

ลองด้วยตัวเอง!

ที่นี่คุณสามารถค้นหาวิธี HTML แบบเก่าในการบรรลุเป้าหมายนี้

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

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

การตั้งค่าระยะขอบบนเซลล์ตารางไม่มีผลกระทบใด ๆ เท่าที่ฉันรู้ CSS ที่เทียบเท่าที่แท้จริงcellspacingคือborder-spacing- แต่มันไม่ทำงานใน Internet Explorer

คุณสามารถใช้border-collapse: collapseเพื่อกำหนดระยะห่างระหว่างเซลล์ได้อย่างน่าเชื่อถือเป็น 0 ดังที่กล่าวไว้ แต่สำหรับค่าอื่น ๆ ฉันคิดว่าวิธีข้ามเบราว์เซอร์เดียวคือการใช้cellspacingแอตทริบิวต์ต่อไป

แฮ็คนี้ใช้ได้กับ Internet Explorer 6 และใหม่กว่า, Google Chrome , Firefox และOpera :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

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

*ประกาศสำหรับ Internet Explorer 6 และ 7 และเบราว์เซอร์อื่น ๆ จะไม่สนใจมัน

expression('separate', cellSpacing = '10px')ส่งคืน'separate'แต่รันทั้งสองคำสั่งเช่นเดียวกับใน JavaScript คุณสามารถส่งผ่านอาร์กิวเมนต์ได้มากกว่าที่คาดไว้และทั้งหมดจะได้รับการประเมิน

สำหรับผู้ที่ต้องการค่าเซลล์ที่ไม่เป็นศูนย์ CSS ต่อไปนี้ใช้ได้สำหรับฉัน แต่ฉันสามารถทดสอบได้ใน Firefox เท่านั้น

ดูลิงค์Quirksmode ที่โพสต์ที่อื่นเพื่อดูรายละเอียดความเข้ากันได้ ดูเหมือนว่าอาจไม่ทำงานกับ Internet Explorer เวอร์ชันเก่า

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

ทางออกที่ง่ายสำหรับปัญหานี้คือ:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

นอกจากนี้หากคุณต้องการcellspacing="0"อย่าลืมเพิ่มborder-collapse: collapseในtableสไตล์ชีทของคุณ

ห่อเนื้อหาของเซลล์ด้วย div และคุณสามารถทำอะไรก็ได้ที่คุณต้องการ แต่คุณต้องห่อทุกเซลล์ในคอลัมน์เพื่อให้ได้ผลที่เหมือนกัน ตัวอย่างเช่นหากต้องการรับระยะขอบซ้ายและขวาที่กว้างขึ้น:

ดังนั้น CSS จะเป็นอย่างไร

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>

ใช่มันเป็นเรื่องยุ่งยาก ใช่ใช้ได้กับ Internet Explorer อันที่จริงแล้วฉันเพิ่งทดสอบกับ Internet Explorer เพราะนั่นคือทั้งหมดที่เราอนุญาตให้ใช้ในที่ทำงาน

เพียงแค่ใช้border-collapse: collapseสำหรับตารางของคุณและpaddingสำหรับการหรือthtd

รูปแบบนี้มีไว้สำหรับการตั้งค่าใหม่เต็มรูปแบบสำหรับตาราง - cellpadding , cellspacingและพรมแดน

ฉันมีสไตล์นี้ในไฟล์ reset.css ของฉัน:

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 สำหรับทุกคนที่ต้องการใช้ CSS คุณก็อาจใช้cellpadding="0" cellspacing="0"เพราะมันไม่ได้คัดค้าน ...

ใครก็ตามที่แนะนำให้ทราบระยะขอบ<td>อย่างชัดเจนไม่ได้ลองสิ่งนี้

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

เพียงใช้กฎการแพ็ด CSS กับข้อมูลตาราง:

td { 
    padding: 20px;
}

และสำหรับระยะห่างชายแดน:

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

อย่างไรก็ตามมันสามารถสร้างปัญหาในเบราว์เซอร์รุ่นเก่าเช่น Internet Explorer เนื่องจากการใช้งานแบบจำลองของ diff box

จากสิ่งที่ฉันเข้าใจจากการจำแนกประเภท W3C คือสิ่งที่<table>มีไว้สำหรับการแสดงข้อมูล 'เท่านั้น'

จากที่ฉันพบมันง่ายกว่ามากในการสร้าง<div>พื้นหลังและทุกสิ่งและมีตารางที่มีข้อมูลที่ลอยอยู่เหนือการใช้position: absolute;และbackground: transparent;...

สามารถใช้งานได้กับ Chrome, Internet Explorer (6 ขึ้นไป) และ Mozilla Firefox (2 และใหม่กว่า)

อัตรากำไรขั้นต้นจะใช้ (หรือหมายนะ) เพื่อสร้าง spacer ระหว่างองค์ประกอบภาชนะเช่น<table>, <div>และ<form>ไม่<tr>, <td>, หรือ<span> <input>การใช้เพื่อสิ่งอื่นนอกเหนือจากองค์ประกอบของคอนเทนเนอร์จะทำให้คุณไม่ว่างในการปรับเว็บไซต์ของคุณสำหรับการอัปเดตเบราว์เซอร์ในอนาคต

CSS:

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

คุณสามารถตั้งค่าการเติมภายในเซลล์ตารางได้อย่างง่ายดายโดยใช้คุณสมบัติการเสริม CSS มันเป็นวิธีที่ถูกต้องในการสร้างเอฟเฟกต์เดียวกันกับแอ็ตทริบิวต์การเลื่อนเซลล์ของตาราง

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>

ในทำนองเดียวกันคุณสามารถใช้คุณสมบัติระยะห่างระหว่างขอบของ CSS เพื่อใช้ระยะห่างระหว่างเส้นขอบเซลล์ของตารางที่อยู่ติดกันเช่นแอตทริบิวต์ Cellspacing อย่างไรก็ตามเพื่อที่จะทำงานระยะห่างระหว่างเส้นขอบของมูลค่าการยุบคุณสมบัติชายแดนจะแยกซึ่งเป็นค่าเริ่มต้น

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>

ลองสิ่งนี้:

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

หรือลองสิ่งนี้:

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

ฉันใช้!importantหลังจากการยุบเส้นขอบเช่น

border-collapse: collapse !important;

และมันใช้งานได้สำหรับฉันใน IE7 ดูเหมือนว่าจะแทนที่แอตทริบิวต์ cellspacing

<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-paddingสามารถกำหนดโดยpaddingใน CSS ในขณะที่cell-spacingสามารถตั้งค่าโดยการตั้งค่าborder-spacingสำหรับตาราง

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

ซอ

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

ถ้าmarginไม่ได้ทำงานให้ลองชุดdisplayของtrไปblockแล้วอัตรากำไรขั้นต้นจะทำงาน

สำหรับตารางการเว้นวรรคและการเว้นวรรคของเซลล์ล้าสมัยใน HTML 5

ตอนนี้สำหรับ cellspacing คุณต้องใช้ระยะห่างชายแดน และสำหรับการกำจัดเซลล์คุณต้องใช้การยุบเส้นขอบ

และให้แน่ใจว่าคุณไม่ได้ใช้สิ่งนี้ในรหัส HTML5 ของคุณ พยายามใช้ค่าเหล่านี้ในไฟล์ CSS 3 เสมอ

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

ในตาราง HTML cellpaddingและcellspacingสามารถตั้งค่าดังนี้:

สำหรับการเติมเซลล์ :

เพียงแค่โทรง่ายเซลล์td/thpadding

ตัวอย่าง:

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

สำหรับระยะห่างระหว่างเซลล์

เพียงแค่โทรหาง่าย table border-spacing

ตัวอย่าง:

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

รูปแบบตารางมากขึ้นโดยการเชื่อมโยงแหล่ง CSS ที่นี่คุณจะได้รับรูปแบบตารางมากขึ้นโดย CSS

คุณสามารถทำสิ่งนี้ใน CSS ของคุณโดยใช้border-spacingและ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>

วิธีเพิ่มสไตล์ลงในตารางโดยตรง? นี่คือแทนที่จะใช้tableใน CSS ของคุณซึ่งเป็นวิธีที่ไม่ดีถ้าคุณมีหลายตารางในหน้าของคุณ:

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

ฉันแนะนำสิ่งนี้และเซลล์ทั้งหมดสำหรับตารางเฉพาะนั้นจะได้รับผลกระทบ

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

คุณสามารถตรวจสอบรหัสด้านล่างเพียงแค่สร้างindex.htmlและเรียกใช้

<!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>

เอาท์พุท: