我想要的是，我得到了這個(gè)表，其中每一行都有一個(gè)圓形邊框的背景色。我遇到的問(wèn)題是，我需要添加一個(gè)空白底部，因?yàn)樽雷右呀?jīng)折疊了。所以這張桌子看起來(lái)像這樣

<table>
 <tr>
   <td>stuff</td>
   <td>stuff2</td>
   <td>stuff3</td>
 </tr>
</table>

然后有很多這樣的行，對(duì)于每一行，我想要一個(gè)圓形邊框的特定背景，到目前為止我已經(jīng)做到了。使用

.colored-row td:first-child {
    border-top-left-radius: 1px;
}

.colored-row td:last-child {
    border-top-right-radius: 1px;
}

.colored-row td:first-child {
    border-bottom-left-radius: 1px;
}

.colored-row td:last-child {
    border-bottom-right-radius: 1px;
}

.colored-row {
    background: #374F60;
}

問(wèn)題出現(xiàn)在這之后，因?yàn)槲乙蚕朐诿恳恍兄g有一個(gè)空白，我試著增加空白a & ltdiv & gt在& lttd & gt自& lttr & gt這沒(méi)有什么不同，但在& lttd & gt顏色隨著邊距不斷擴(kuò)大，如果我把顏色放在& lttd & gt它還在& lttd & gt沒(méi)有涂顏色的地方。

所以我希望整行都有這樣的空白。有什么方法可以做到這一點(diǎn)嗎？

您不能向tr元素添加邊距。唯一可行的方法是在tr上使用display:block。但是這將導(dǎo)致tr的寬度取決于它的內(nèi)容，而不是表的寬度。

一個(gè)解決方案是(如果你能編輯HTML)在你的彩色行之間添加一個(gè)分隔線，并給它一個(gè)高度。

.colored-row td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.colored-row td:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

.colored-row {
  background: #374F60;
}

.separator {
  height: 10px;
}

table {
  border-collapse: collapse;
  width:100%;
}

<table>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
  <tr class="separator"></tr>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
</table>