HTML CSS 圓角表

Question

我的桌子沒什么問題。 它按類風格化。 一個用於制作圓角並將背景更改為灰色的 TABLE。 另一種是把表的rest變成白色，我賦值給TBODY。 第二個class賦值后，左下角和右下角不再圓角。

<table align=center class="grey">
  <thead>
    <tr height=50>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody class="white">
    <tr height=50>
      <td>row two</td>
      <td>row two</td>
    </tr>

    <tr height=50 class="white">
      <td>row three</td>
      <td>row three</td>
    </tr>
  </tbody>
</table>

body {
  background: #000;
}

table.grey {
    background: #F6F2F5;
    border: 3px solid #FFF;
    text-align: center;
    width: 80%;
    padding: 15px;
    border-collapse: collapse;
    border-left: 0;
    border-right: 0;
    border-radius: 10px;
    border-spacing: 0px;
}
.white {
  background: #FFF;
  color: #000;
  padding: 50px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

將 class 賦值給每一行的 TR 給出與 TBODY 相同的結果。 我很笨 https://jsfiddle.net/2tm4z90b/8/

Answer 1

像這樣。

 table { border-radius: 5px; border: 1px solid black; } table thead { background: gray; }

 <table align=center class="grey"> <thead> <tr height=50> <th>header</th> <th>header</th> </tr> </thead> <tbody class="white"> <tr height=50> <td>row two</td> <td>row two</td> </tr> <tr height=50 class="white"> <td>row three</td> <td>row three</td> </tr> </tbody> </table>

Answer 2

tbody不能真正設置樣式，它是表格結構的一部分，不應該被看到，也不應該設置樣式，除非您重置其顯示，但這會破壞您的表格布局。

選項是

• 僅在桌子上設置半徑並使用溢出。
• 如果需要，通過框陰影偽造邊框，使其遵循圓形

可能的例子：

 body { background: #000; } table.grey{ margin-top:3em; background: gray; box-shadow:0 0 0 3px red;/* instead border */ text-align: center; width: 80%; padding: 15px; border-collapse: collapse; border-left: 0; border-right: 0; border-radius: 10px; border-spacing: 0px; overflow:hidden; /* hide overflowing cells */ }.white tr { background: #bee; color: #000; padding: 50px; }

 <table align=center class="grey"> <thead> <tr height=50> <th>header</th> <th>header</th> </tr> </thead> <tbody class="white"> <tr height=50> <td>row two</td> <td>row two</td> </tr> <tr height=50> <td>row three</td> <td>row three</td> </tr> </tbody> </table>