如何实现HTML表格tr的点状边框及首尾留白效果？

你的现有代码是给每个<td>添加底部点状边框，这会导致边框从第一个<td>左边缘延伸到最后一个<td>右边缘，且无法直接控制首尾空白。下面提供两种可行方案：

方案一：用伪元素实现完整的点状边框（推荐） #

这种方法能生成一条连贯的点状线，精准控制左右空白，不会被<td>内容打断：

/* 基础表格布局设置，确保<tr>可相对定位 */
table {
  width: 100%; /* 根据实际需求调整宽度 */
  border-collapse: collapse;
}

tr.tr_dotted {
  position: relative;
}

tr.tr_dotted:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px; /* 左侧空白宽度，按需修改 */
  right: 20px; /* 右侧空白宽度，按需修改 */
  border-bottom: dotted 1.8px #bdbdbd;
}

方案二：调整的内边距保留空白 #

如果需要保留每个<td>独立的底部边框，可通过给首尾<td>加内边距实现空白：

tr.tr_dotted td {
  border-bottom: dotted 1.8px #bdbdbd !important;
}

/* 给第一个<td>加左侧内边距 */
tr.tr_dotted td:first-child {
  padding-left: 20px;
}

/* 给最后一个<td>加右侧内边距 */
tr.tr_dotted td:last-child {
  padding-right: 20px;
}

注意：方案二可能会因为<td>之间的间距导致点状线出现断点，若追求连贯线条优先选方案一。

内容的提问来源于stack exchange，提问作者jeff