CSS: ฉันจะสร้างช่องว่างระหว่างแถวในตารางได้อย่างไร

ความหมายทำให้ตารางผลลัพธ์มีลักษณะดังนี้:

[=== แถว ===]
[=== แถว ===]
[=== แถว ===]
[=== แถว ===]

... และอื่น ๆ เช่นนี้:

[=== แถว ===]

[=== แถว ===]

[=== แถว ===]

[=== แถว ===]

ฉันพยายามเพิ่ม

margin-bottom:1em;

เป็นทั้งtdและtrแต่ไม่มีอะไรเลย ความคิดใด ๆ ?

ทั้งหมดที่คุณต้องการ:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

สมมติว่าคุณต้องการช่องว่างแนวตั้ง 1em และไม่มีช่องว่างแนวนอน หากคุณกำลังทำสิ่งนี้คุณควรดูที่การควบคุมความสูงของเส้นด้วย

น่าแปลกที่คำตอบบางคำที่ผู้คนให้มาเกี่ยวข้องกับการล่มสลายของพรมแดน: การล่มสลายซึ่งผลของมันตรงกันข้ามกับคำถามที่ถาม

table {
    border-collapse: collapse;
}

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

เซลล์จะไม่ตอบสนองต่อสิ่งใดเว้นแต่คุณจะตั้งค่าการยุบขอบก่อน คุณยังสามารถเพิ่มเส้นขอบให้กับองค์ประกอบ TR ได้เมื่อตั้งค่าแล้ว (เหนือสิ่งอื่นใด)

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

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

หากคุณไม่ได้มีพรมแดนหรือมีพรมแดนและต้องการระยะห่างภายในเซลล์คุณสามารถใช้หรือpadding line-heightเท่าที่ฉันรู้ระยะขอบไม่มีผลต่อเซลล์และแถว
คุณสมบัติ CSS สำหรับการเว้นระยะห่างของเซลล์คือborder-spacingแต่ใช้ไม่ได้บน IE6 / 7 (ดังนั้นคุณสามารถใช้ได้ขึ้นอยู่กับฝูงชนของคุณ)

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

/ * ตารางยังคงต้องการcellspacing="0"ในมาร์กอัป * /

นี่คือวิธีการ (ฉันคิดว่ามันเป็นไปไม่ได้):

ขั้นแรกให้ตารางเฉพาะระยะห่างเส้นขอบแนวตั้ง (เช่น 5px) และตั้งค่าระยะห่างของเส้นขอบแนวนอนเป็น 0 จากนั้นคุณควรกำหนดเส้นขอบที่เหมาะสมให้กับเซลล์แต่ละแถว ตัวอย่างเช่นเซลล์ด้านขวาสุดในแต่ละแถวควรมีขอบด้านบนล่างและขวา เซลล์ด้านซ้ายสุดควรมีเส้นขอบด้านบนด้านล่างและด้านซ้าย และเซลล์อื่น ๆ ระหว่าง 2 เซลล์นี้ควรมีขอบด้านบนและด้านล่างเท่านั้น ดังตัวอย่างนี้:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

ในความคิดของฉันวิธีที่ง่ายที่สุดคือการเพิ่มช่องว่างในแท็กของคุณ

td {
 padding: 10px 0
}

หวังว่านี่จะช่วยคุณได้! เชียร์!

เพียงแค่คุณสามารถใช้padding-topและpadding-bottomในtdองค์ประกอบ

หน่วยสามารถอะไรก็ได้จากรายการนี้:

รหัสสาธิต:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

ช่องว่างภายใน TD จะทำงานได้หากคุณต้องการให้พื้นที่มีสีพื้นหลังเหมือนกับ td

ในกรณีของฉันความต้องการคือช่องว่างระหว่างแถวส่วนหัวและอะไรก็ตามที่อยู่เหนือมัน

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

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

หากคุณยึดติดกับการออกแบบโดยใช้ตารางความคิดที่ดีที่สุดคือให้แถวว่างที่ไม่มีเนื้อหาและระบุความสูงระหว่างแต่ละแถวในตาราง

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

คุณยังสามารถปรับเปลี่ยนความสูงของแต่ละแถวโดยใช้ CSS

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

คุณยังสามารถปรับเปลี่ยนความสูงของ<td>องค์ประกอบได้ซึ่งควรให้ผลลัพธ์เดียวกัน

สร้างอีกอัน<tr>ด้านล่างและเพิ่มพื้นที่หรือความสูงให้กับเนื้อหาของ<td>

ตัวอย่างเช่นชำระเงินซอ

https://jsfiddle.net/jd_dev777/wx63norf/9/

เพิ่มกฎต่อไปนี้ใน tr และควรใช้งานได้

float: left

ตัวอย่าง (เปิดใน IE9 offcourse :)): http://jsfiddle.net/zshmN/

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

ดังนั้นผู้ที่ให้คะแนนกรุณาแจ้งให้เราทราบแนวทางแก้ไขด้วย