css - 制作一张 body 而非头部圆 Angular 的 table ，并有背景颜色

Question

我正在尝试制作一张带有彩色背景和圆 Angular 主体的 table 。我已经设法让它工作了，但现在桌面下方出现了白 Angular ……有人能帮帮我吗？

这是我的代码示例，但我使用的是 Bootstrap ，因此没有垂直边框。我只需要摆脱 body 顶部的白色 Angular 落。 http://jsfiddle.net/chickatysplit/cts858ro/

<div class="table-background">  
<table class="table">
  <thead style="background-color: #e5e5e5;">
    <tr style="height: 20px;">
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr style="border-top-left-radius: 10px;">
      <td>some text</td>
      <td>some text</td>
      <td>some text</td>
  <td >some text</td>
    </tr>
    <tr>
      <td>some text</td>
      <td>some text</td>
      <td>some text</td>
      <td>some text</td>
    </tr>
        </tbody>
</table>
</div>

澄清一下，我希望 thead 具有与灰色背景相同的颜色，但 tbody 具有带圆 Angular 的白色背景。请帮忙!

Answer 1

您需要移除表格上的白色背景并为 td 单元格提供白色背景:

...

table {
    border-collapse: separate;
    border-radius: 10px; 
}
td { background: #fff; }

...

此外 - 不需要内联样式声明(即 <tr style="..."> ):这就是您的样式表的用途。 :)