วิธีการเว้นระยะห่างระหว่างองค์ประกอบ TBODY

ฉันมีโต๊ะแบบนี้:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

ฉันต้องการเว้นระยะห่างระหว่างแต่ละองค์ประกอบ tbody แต่การเว้นระยะห่างและระยะขอบไม่มีผล ความคิดใด ๆ ?

ลองทำเช่นนี้หากคุณไม่รังเกียจที่จะไม่มีพรมแดน

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

สิ่งนี้จะได้ผลขึ้นอยู่กับข้อกำหนดการสนับสนุนเบราว์เซอร์ของคุณ:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

ผู้คนมักจะมีความคิดเห็นที่ขัดแย้งกันเกี่ยวกับการใช้องค์ประกอบตารางว่างเพื่อจัดวางหน้า (ตามหลักฐานจากการโหวตลงคะแนนของคำตอบนี้) ฉันจำสิ่งนี้ได้ แต่บางครั้งก็ง่ายกว่าที่จะใช้วิธีนี้เมื่อคุณทำงานในลักษณะที่ " รวดเร็วและสกปรก "

ฉันใช้แถวว่างในโครงการที่ผ่านมาเพื่อเว้นวรรคกลุ่มของแถวตาราง ฉันกำหนดแถวตัวเว้นวรรคเป็นคลาส css ของตนเองและกำหนดความสูงสำหรับคลาสนั้นซึ่งทำหน้าที่เป็นระยะขอบบนและล่างสำหรับกลุ่มของแถวตารางนั้น

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

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

tr{
   height: 40px;
}

ฉันมีปัญหาในการเว้นวรรคหลายรายการ<tbody>ด้วย::beforeหลอกอย่างถูกต้องโดย<tr>มี<td>rowspan ในเบราว์เซอร์สองตัว

โดยทั่วไปหากคุณมี<tbody>โครงสร้างเช่นนี้:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

และคุณทำตามว่าใครแนะนำให้เขียน css ใน::beforeองค์ประกอบหลอกเช่นนี้:

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

สิ่งนี้จะส่งผลต่อ rowspan ทำให้ตาราง "แพ้" ภายในวินาทีที่สอง<tr>ว่ามีกี่<td>-rowspan ในอันแรก

ดังนั้นหากใครพบปัญหาประเภทนั้นวิธีแก้คือจัดสไตล์::beforeหลอกในลักษณะนี้:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

นี่คือซอ

นี่คือความเป็นไปได้อีกประการหนึ่งที่ต้องอาศัย: ลูกคนแรกซึ่งไม่มีในเบราว์เซอร์ทั้งหมด:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

เพียงตั้งค่าdisplayเป็นblockและจะทำงาน

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

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

หรือคุณยังสามารถตั้งค่าคุณสมบัติล้นของคลาส TBODY เป็นอย่างอื่นที่ไม่ใช่ "มองเห็นได้" วิธีนี้ช่วยให้คุณสามารถคงรูปแบบเส้นขอบที่แยกออกมาได้เช่นกัน:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

เนื่องจากช่องว่างภายในสามารถนำไปใช้กับ TD ได้คุณสามารถใช้เคล็ดลับด้วยเครื่องหมาย + จากนั้นจะเป็นไปได้ที่จะเพิ่มช่องว่างด้านบนให้กับ TD ของ TR ตัวแรกของร่างกาย:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

ฉันได้เพิ่ม "tbody + tbody" ดังนั้นคนแรกจะไม่มีช่องว่างด้านบน อย่างไรก็ตามไม่จำเป็นต้องใช้

เท่าที่ฉันรู้ไม่มีข้อเสีย :) แม้ว่าจะไม่ได้ทดสอบเบราว์เซอร์รุ่นเก่า

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

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

คำตอบใหม่

คุณสามารถใช้<tbody>แท็กได้มากเท่าที่คุณต้องการ ฉันไม่รู้เลยว่า W3C ก็โอเคจนถึงตอนนี้ ไม่ต้องบอกว่าวิธีแก้ปัญหาด้านล่างของฉันใช้ไม่ได้ (ทำ) แต่ให้ทำในสิ่งที่คุณพยายามทำกำหนด<tbody>คลาสแท็กของคุณจากนั้นอ้างอิง<td>แท็กแต่ละแท็กผ่าน CSS ดังนี้:

table tbody.yourClass td {
    padding: 10px;
}

และ HTML ของคุณด้วยเหตุนี้:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

ลองผู้ชายคนนั้นสิ :)

คำตอบเก่า ๆ

ไม่ว่าคุณจะทำอะไรอย่าแทรกแถวว่าง ...

คุณไม่ควรมีองค์ประกอบมากกว่า 1 ชิ้นในตารางของคุณ สิ่งที่คุณทำได้คือตั้งค่าแอตทริบิวต์คลาสหรือ id ใน<tr>องค์ประกอบของคุณและให้<td>แท็กที่เกี่ยวข้อง:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

คุณยังสามารถกำหนด<tr>ชั้นเรียนเพิ่มเติมด้านบนและด้านล่างเพื่อให้พวกเขาทำเฉพาะส่วนบนหรือด้านล่างตามลำดับ:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

และใน HTML ของคุณ<tr>แท็กของคุณจะมีลักษณะดังนี้:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

หวังว่านี่จะช่วยได้!

คำตอบ djensen47 ใช้งานได้ดีสำหรับเบราว์เซอร์รุ่นใหม่อย่างไรก็ตามตามที่ระบุไว้ IE7 ไม่สามารถใช้งานได้

วิธีแก้ปัญหาของฉันสำหรับปัญหานี้เพื่อรองรับเบราว์เซอร์รุ่นเก่าคือการรวมเนื้อหาแต่ละเซลล์ไว้ใน div จากนั้นเพิ่มขอบด้านบนให้กับ div

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

การตั้งค่าความสูงจะช่วยให้เซลล์มีความสูงอย่างน้อย 30px เพื่อป้องกันไม่ให้สีของเซลล์ที่ใช้ภายใน div ยุบลงไปรอบ ๆ ข้อความ ขอบด้านบนสร้างพื้นที่ที่ต้องการโดยทำให้ทั้งแถวสูงขึ้น

เจอสิ่งนี้ในขณะที่พยายามแก้ปัญหาด้วยตัวเอง ฉันประสบความสำเร็จในการวาง<br>แท็กก่อน</tbody>แท็กปิด มันเป็นการแก้ไขภาพล้วนๆ แต่ดูเหมือนว่าจะใช้ได้กับเบราว์เซอร์ส่วนใหญ่ที่ฉันทดสอบ

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

ควรเข้าถึงได้เช่นกัน.

พร้อมเครดิตคนอื่น ๆ ที่ตอบก่อน ...

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50%;
}
tbody:before {
  content: "";
  display:block;
  border-top: 15px solid white;
}
tbody tr {
  border-color: #000;
  border-style: solid;
}
tbody tr:first-of-type{
  border-width: 2px 2px 0 2px;
}
tbody tr:nth-of-type(1n+2){
  border-width: 0 2px 0 2px;
}
tbody tr:last-of-type{
  border-width: 0 2px 2px 2px;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
tbody tr:hover {
  background-color: #eee;
}
td {
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <th colspan="3">One</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Two</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>