與HTML表中的CSS交叉綁定

Question

我想要達到以下效果：

我必須使用的HTML是一個簡單的表：

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

為了獲得圓形邊界，我必須更改td元素以顯示為inline-block 。

我的問題在於灰色樂隊。 我最終在行之間留有空白。 我不能使用單獨的背景元素，因為行數會改變。 編輯： 我需要邊框之間的間距，但也希望灰色列中的白色間隙也變成灰色...

我的嘗試在這里： https ： //jsfiddle.net/h5Lh1eaw/24/

有沒有我不知道的魔術CSS可以做到這一點？

Answer 1

是的 您必須給border-collapse: collapse到<table>並且您必須：

的CSS

table#a, table#b {
  border-collapse: collapse;
}

預習：

片段

 * { box-sizing: border-box; } table#a { border-collapse: collapse; } table#b { border-collapse: collapse; } td:nth-child(2) { background-color: #c0c0c0; } tbody tr { margin: 5px; } td { display: inline-block; padding: 3px; width: 200px; } tbody td { border-top: 1px solid black; border-bottom: 1px solid black; } tbody td:first-of-type { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid black; } tbody td:last-of-type { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px solid black; } 

 <p> A: </p> <table id="a"> <thead> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </thead> <tbody> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </tbody> <tfoot> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </tfoot> </table> <p> B: </p> <table id="b"> <thead> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </thead> <tbody> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </tbody> <tfoot> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </tfoot> </table> 

JSFiddle： https ：//jsfiddle.net/gfqrL8n0/

Answer 2

我認為要獲得差距的唯一方法是將tbody單元內容包裹在一個span中

 * { box-sizing: border-box; } td:nth-child(2), td:nth-child(3) { background-color: #c0c0c0; } table { border-spacing:6px 0; /* gap between columns */ } td { padding: 3px 0; /* gap between rows */ width: 200px; } thead td, tfoot td { padding:3px; /* match padding of span */ } tbody td > span { padding:3px; position:relative; display:block; border-top: 1px solid black; border-bottom: 1px solid black; } tbody td > span:after { /* border gap filler */ content:''; display:block; position:absolute; left:100%; top:-1px; bottom:-1px; width:6px; /* match border spacing size */ border-top: 1px solid black; border-bottom: 1px solid black; } tbody td:first-child > span { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid black; } tbody td:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px solid black; } tbody td:last-child > span:after { display:none; } 

 <table id="a"> <thead> <tr> <td>normal</td> <td>grey</td> <td>grey</td> <td>normal</td> </tr> </thead> <tbody> <tr> <td><span>normal</span></td> <td><span>grey</span></td> <td><span>grey</span></td> <td><span>normal</span></td> </tr> <tr> <td><span>normal</span></td> <td><span>grey</span></td> <td><span>grey</span></td> <td><span>normal</span></td> </tr> </tbody> <tfoot> <tr> <td>normal</td> <td>grey</td> <td>grey</td> <td>normal</td> </tr> </tfoot> </table> 

使用偽元素作為邊界而不是跨度

 * { box-sizing: border-box; } td:nth-child(2), td:nth-child(3) { background-color: #c0c0c0; } table { border-spacing:6px 0; /* gap between columns */ } td { width: 200px; } thead td, tfoot td { padding:3px; /* match padding of span */ } tbody td { padding: 6px 3px; /* 6px is so that we have vertical padding */ position: relative; } tbody td:after { /* borders */ content:''; display:block; position:absolute; left:0; right: -6px; /* match border spacing size */ top:3px; /* half the vertical padding */ bottom:3px; border-top: 1px solid black; border-bottom: 1px solid black; } tbody td:first-child:after { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid black; } tbody td:last-child:after { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px solid black; right: -3px; /* not sure if you want this to poke out the end of the table */ } 

 <table id="a"> <thead> <tr> <td>normal</td> <td>grey</td> <td>grey</td> <td>normal</td> </tr> </thead> <tbody> <tr> <td>normal</td> <td>grey</td> <td>grey</td> <td>normal</td> </tr> <tr> <td>normal</td> <td>grey</td> <td>grey</td> <td>normal</td> </tr> </tbody> <tfoot> <tr> <td>normal</td> <td>grey</td> <td>grey</td> <td>normal</td> </tr> </tfoot> </table> 

Answer 3

檢查此CSS：

* {
        box-sizing: border-box;
    }

    table#a {
        border-spacing: 5px, 0;
    }

    table#b {
        border-collapse: collapse;
    }

    td {
        background-color: #c0c0c0;
        border-right: 5px solid #FFFFFF;
    }

    td:nth-child(1) {
        background-color: #ffffff;
    }

    tbody tr {
        margin: 5px;
    }

    td {
        display: inline-block;
        padding: 3px;
        width: 200px;
    }

    tbody td {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    tbody td:first-of-type {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-left: 1px solid black;
    }

    tbody td:last-of-type {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-right: 1px solid black;
    }

---

檢查圖像片段