样式表上的单个行

Question

我们的设计师为我们正在开发的SPA创建了此表格布局。我们的问题是，使用HTML表使用CSS可以实现吗？具体来说，我们遇到了行距（10px），单个行的拐角半径（6px）以及每行底部边缘的细微阴影的组合问题。每行有5个单元格。

Answer 1

显然，CSS 属性 box-shadow applies to all elements 因此它也适用于 <tr> 标签：

body{
  background-color:#f8f8f8
}
tr{
  display:block;
  background-color:#fff;
  border:0;
  border-radius:6px;
  box-shadow:-1px 3px 2px #bbb;
  margin-bottom:10px
}
td{
  padding:25px
}

<table>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

特别是

<块引用>

行间距（10px）、各行的圆角半径（6px）和每行底部边缘的轻微阴影的组合

是用标签tr的最后三行CSS样式实现的，顺序不同。与另一条评论一样，行 display:block 的 tr 属性在这里至关重要。

以上代码是有效的 HTML5 和 CSS3。