信封样式。css实现 每一行添加虚线下划线

在CSS中，如果你想实现信封样式的表格行，并为其添加虚线下划线，你可以使用伪元素`:before`和`:after`来创建类似于信封边缘的效果，同时结合`border-bottom`属性来添加虚线下划线。以下是一个简单的示例：

<style>
.table-envelope {
  border-collapse: collapse;
}

.table-envelope th,
.table-envelope td {
  padding: 8px;
  border: 1px solid #ccc;
}

.table-envelope tr:nth-child(even) {
  background-color: #f2f2f2;
}

.table-envelope tr:hover {
  background-color: #ddd;
}

.table-envelope .envelope-line {
  position: relative;
}

.table-envelope .envelope-line::before {
  content: "";
  height: 100%;
  width: 1px;
  position: absolute;
  top: 0;
  left: -5px; /* 邮票宽度 */
  background-color: #ccc;
  transform-origin: bottom left;
  transform: rotate(45deg);
}

.table-envelope .envelope-line::after {
  content: "";
  height: 1px;
  width: 100%;
  position: absolute;
  top: 0;
  right: -5px; /* 邮票宽度 */
  background-color: #ccc;
  transform-origin: bottom right;
  transform: rotate(-45deg);
}
</style>

<table class="table-envelope">
  <tr class="envelope-line">
    <th>邮件标题</th>
    <td>内容</td>
  </tr>
  <!-- 添加更多行... -->
</table>

在这个例子中，`.table-envelope`设置了表格的基本样式，`.envelope-line`应用于需要信封效果的行。`:before`和`:after`分别创建了从左上角到右下角和从右上角到左下角的虚线，模拟信封边缘。