ช่องว่างระหว่างสองแถวในตาราง?

เป็นไปได้ผ่าน CSS?

ฉันกำลังพยายาม

tr.classname {
  border-spacing: 5em;
}

ไม่มีประโยชน์ บางทีฉันอาจจะทำอะไรผิดพลาด?

คุณต้องใช้ช่องว่างภายในtdองค์ประกอบของคุณ สิ่งนี้ควรทำเคล็ดลับ แน่นอนคุณสามารถรับผลลัพธ์เดียวกันโดยใช้การเติมเต็มด้านบนแทนการแพ็ดด้านล่าง

ในโค้ด CSS ด้านล่างเครื่องหมายมากกว่าหมายถึงการเติมเต็มจะใช้กับtdองค์ประกอบที่นำลูกไปยังtrองค์ประกอบที่มีคลาสspaceUnderเท่านั้น สิ่งนี้จะทำให้สามารถใช้ตารางที่ซ้อนกันได้ (Cell C และ D ในรหัสตัวอย่าง) ฉันไม่แน่ใจเกี่ยวกับการสนับสนุนเบราว์เซอร์สำหรับตัวเลือกลูกโดยตรง (คิดว่า IE 6) แต่ไม่ควรทำลายโค้ดในเบราว์เซอร์สมัยใหม่

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

สิ่งนี้ควรแสดงผลดังนี้:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

ในตารางหลักลองตั้งค่า

border-collapse:separate; 
border-spacing:5em;

บวกกับการประกาศเส้นขอบและดูว่าสิ่งนี้บรรลุผลที่คุณต้องการหรือไม่ อย่างไรก็ตามระวังว่า IE นั้นไม่รองรับรูปแบบ "เส้นขอบที่คั่น"

คุณมีตารางที่มีอัลบั้มประจำตัวพร้อมข้อมูลใด ๆ ... ฉันข้าม TRS และ TDS แล้ว

<table id="albums" cellspacing="0">       
</table>

ใน CSS:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

เนื่องจากฉันมีภาพพื้นหลังด้านหลังโต๊ะการแกล้งด้วยการใส่สีขาวจะไม่ทำงาน ฉันเลือกที่จะวางแถวว่างไว้ระหว่างเนื้อหาแต่ละแถว:

<tr class="spacer"><td></td></tr>

จากนั้นใช้ css เพื่อให้ตัวเว้นวรรคมีความสูงและพื้นหลังโปร่งใส

จาก Mozilla Developer Network :

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

ส่วนสุดท้ายนั้นมักจะดูแล ตัวอย่าง:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

UPDATE

ตอนนี้ฉันเข้าใจว่า OP ต้องการเฉพาะแถวที่แยกต่างหากเพื่อเพิ่มระยะห่าง ฉันได้เพิ่มการตั้งค่าด้วยtbodyองค์ประกอบที่ประสบความสำเร็จโดยไม่ทำลายความหมาย อย่างไรก็ตามฉันไม่แน่ใจว่ารองรับเบราว์เซอร์ทั้งหมดหรือไม่ ฉันทำมันใน Chrome

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

ประกาศการสนับสนุน: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

คุณอาจลองเพิ่มแถวตัวคั่น:

HTML:

<tr class="separator" />

CSS:

table tr.separator { height: 10px; }

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

ลองดูที่การยุบตัวของเส้นขอบ:คุณสมบัติที่แยกต่างหาก (ค่าเริ่มต้น) และคุณสมบัติระยะห่างของเส้นขอบ

ก่อนอื่นคุณต้องแยกพวกมันออกด้วยการยุบขอบจากนั้นคุณสามารถกำหนดช่องว่างระหว่างคอลัมน์และแถวที่มีระยะห่างระหว่างชายแดนชายแดนระยะห่าง

ทั้งสอง CSS คุณสมบัติเหล่านี้เป็นจริงที่ดีได้รับการสนับสนุนในทุกเบราว์เซอร์, ดูที่นี่

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

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

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

ตกลงคุณสามารถทำได้

tr.classname td {background-color:red; border-bottom: 5em solid white}

ตรวจสอบให้แน่ใจว่ามีการตั้งค่าสีพื้นหลังบน td แทนที่จะเป็นแถว สิ่งนี้ควรใช้กับเบราว์เซอร์ส่วนใหญ่ ... (Chrome คือ & ทดสอบโดย ff)

คุณต้องตั้งborder-collapse: separate;บนโต๊ะ สไตล์ชีทเริ่มต้นของเบราว์เซอร์ส่วนใหญ่เริ่มต้นที่border-collapse: collapse;ซึ่งจะเว้นระยะห่างระหว่างขอบ

นอกจากนี้ชายแดนระยะห่าง: ไปบนไม่ได้ TDTR

ลอง:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

คุณสามารถใช้line-heightในตาราง:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

คำตอบที่สายเกินไป :)

หากคุณใช้การลอยกับtrองค์ประกอบคุณสามารถเว้นวรรคระหว่างสองแถวพร้อมmarginแอตทริบิวต์

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

สำหรับการสร้างภาพลวงตาของระยะห่างระหว่างแถวให้ใช้สีพื้นหลังกับแถวจากนั้นสร้างเส้นขอบหนาด้วยสีขาวเพื่อให้มีการสร้าง "ช่องว่าง" :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

วิธีที่ถูกต้องในการให้ระยะห่างสำหรับตารางคือการใช้ Cellpadding และ Cellspacing เช่น

<table cellpadding="4">

ฉันสะดุดกับสิ่งนี้ในขณะที่ดิ้นรนกับปัญหาที่คล้ายกัน ฉันพบคำตอบของ Varun Natraaj ว่ามีประโยชน์มาก แต่ฉันจะใช้เส้นขอบโปร่งใสแทน

td { border: 1em solid transparent; }

เส้นขอบโปร่งใสยังคงมีความกว้าง

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

    tr {
      border-bottom:5em solid white;
    }

เพียงใส่divข้างในtdและตั้งค่ารูปแบบต่อไปนี้div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

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

ฉันมีเซลล์ตาราง 2 เซลล์ตัวหนึ่งมีสีพื้นหลังส่วนอีกเซลล์หนึ่งที่มีสีเส้นขอบ การแก้ปัญหาข้างต้นลบเส้นขอบดังนั้นเซลล์ทางด้านขวาจะดูเหมือนลอยอยู่กลางอากาศ วิธีแก้ปัญหาที่ใช้กลอุบายคือการแทนที่table, trและtdด้วย divs และคลาสที่สอดคล้องกัน: table จะเป็นdiv id="table_replacer", tr จะเป็นdiv class="tr_replacer"และ td จะเป็นdiv class="td_replacer"(เปลี่ยนแท็กปิดเป็น divs อย่างชัดเจน)

เพื่อให้ได้ทางออกสำหรับปัญหาของฉัน css คือ:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

หวังว่านี่จะช่วยใครซักคน

คุณสามารถเติมองค์ประกอบ <td /> ด้วยองค์ประกอบ <div /> และใช้ส่วนต่างใด ๆ กับ divs ที่คุณต้องการ สำหรับช่องว่างระหว่างแถวภาพคุณสามารถใช้ภาพพื้นหลังซ้ำในองค์ประกอบ <tr /> (นี่เป็นวิธีแก้ปัญหาที่ฉันเพิ่งใช้ในวันนี้และดูเหมือนว่าจะทำงานได้ทั้งใน IE6 และ FireFox 3 แม้ว่าฉันจะไม่ได้ทดสอบอีกต่อไป)

นอกจากนี้หากคุณไม่ชอบการแก้ไขรหัสเซิร์ฟเวอร์เพื่อใส่ <div /> s ไว้ใน <td /> s คุณสามารถใช้ jQuery (หรือบางอย่างที่คล้ายกัน) เพื่อห่อเนื้อหา <td /> ใน <div / แบบไดนามิก > ช่วยให้คุณสามารถใช้ CSS ได้ตามต้องการ

หรือเพียงเพิ่มช่องว่างที่มีความสูงของระยะห่างระหว่างแถวที่คุณต้องการเพิ่มระยะห่าง

นี่เป็นวิธีแก้ปัญหาที่ง่ายและสง่างามโดยมีข้อแม้บางประการ:

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

เมื่อนึกถึงสิ่งนี้ลองทำสิ่งนี้:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

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

โปรดทราบว่าหากคุณมีเส้นขอบรอบ ๆ ตารางรวมทั้งเซลล์คุณจะต้องเพิ่มระยะขอบแนวนอนของบล็อก 'ของคุณ ดังนั้นสำหรับเส้นขอบตาราง 4px คุณควรใช้แทน:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

และหากตารางของคุณใช้border-collapse:separateแทนคุณborder-collapse:collapseจะต้อง (ก) ใช้ความกว้างเส้นขอบตารางแบบเต็ม:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... และ (b) แทนที่เส้นขอบความกว้างสองเท่าซึ่งตอนนี้จำเป็นต้องปรากฏใต้ช่องว่าง:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

เทคนิคนี้ได้รับการปรับให้เข้ากับรุ่น. gap หลังจากที่คุณต้องการหรือสร้างช่องว่างแนวตั้ง (คอลัมน์) แทนช่องว่างแถว

นี่คือ codepen ที่คุณสามารถดูได้ในการทำงาน: https://codepen.io/anon/pen/agqPpW

ที่นี่ทำงานได้อย่างราบรื่น:

#myOwnTable td { padding: 6px 0 6px 0;}

ฉันคิดว่าคุณสามารถหาเลย์เอาต์ที่ละเอียดยิ่งขึ้นได้โดยระบุ td ที่ต้องการ

ทำสิ่งนี้แสดงให้เห็นข้างต้น ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

ลบการจัดแนวคอลัมน์แนวตั้งดังนั้นโปรดระมัดระวังวิธีที่คุณใช้

คุณเคยลองไหม:

tr.classname { margin-bottom:5em; }

อีกวิธีหนึ่งแต่ละ td สามารถปรับได้เช่นกัน:

td.classname { margin-bottom:5em; }

หรือ

 td.classname { padding-bottom:5em; }