为表格上的单个行设置样式答案

【问题标题】：Styling Individual Rows on Tables为表格上的单个行设置样式
【发布时间】：2019-02-01 00:03:08
【问题描述】：

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

【问题讨论】：

是的，这可以实现。
如何实现投影？ box-shadow css 不适用于
将display: block 应用于tr，将min-width 和min-height 应用于td 和th。 box-shadow 仅适用于块或内联块元素。

【解决方案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) 以及每行底部边缘的轻微阴影的组合

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

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

【讨论】：