如何通过CSS实现表格行底分隔线占满整个屏幕宽度

当前分隔线无法满屏的核心原因有两个：

• 绝对定位的伪元素默认以最近的非static定位祖先元素为尺寸基准，你未给tr设置定位属性，且width: 100%仅相对于父容器宽度计算，无法突破外层容器的宽度、内边距限制。
• 未指定伪元素相对于视口定位的偏移规则，无法延伸到父容器外的屏幕边缘区域。

直接在现有CSS中追加以下代码即可，无需修改任何HTML结构：

/* 为表格行设置定位基准，允许内容溢出容器 */
.dataTable tbody tr {
  position: relative !important;
  overflow: visible !important;
}

/* 重写分隔线样式，实现满屏宽度 */
.dataTable tbody tr:after {
  content: "";
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  /* 左右边距抵消父容器偏移，直接撑满视口宽度 */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background-color: #dddddd !important;
  z-index: 1 !important;
}

/* 可选：避免页面出现横向滚动条 */
body {
  overflow-x: hidden !important;
}

/* 可选：如果不需要最后一行底部的分隔线，放开这段代码
.dataTable tbody tr:last-child:after {
  display: none !important;
}
*/

• 分隔线宽度完全匹配屏幕视口宽度，不受表格外层父容器的最大宽度、左右内边距限制。
• 兼容你现有的列显示规则（前3列inline-block、后2列block），不会破坏原有表格布局。
• 不需要改动自动生成的HTML结构，仅通过CSS即可实现需求。

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