如何使用 CSS 修复此 HTML 表格样式？

Question

我有一个 HTML 表格，我想使用 HTML 设置样式。

我在

@media only screen and (max-width:900px)

下有这个CSS，适用于手机和平板电脑：

/* Styles Instant Win table */
.instant-wins-table {
    margin-bottom: -2rem !important;
    margin-left: -10%;
    margin-right: -31%;
    margin-top: -2.5%;
    position: relative;
    left: 3.5%;
}
.instant-wins-table table {
    table-layout: fixed !important;
}
.instant-wins-table * {
    text-align: left !important;
border-bottom: solid 1px #0a369d;
} 
.instant-wins-table td span {
    border: none !important;
}


/* Moves Prize column left */
.instant-wins-table table thead tr th:nth-child(2), .instant-wins-table table tbody tr td:nth-child(2) {
    position: relative;
    right: 10% !important;
}


/* Moves Winner column left */
.instant-wins-table table thead tr th:nth-child(3), .instant-wins-table table tbody tr td:nth-child(3) {
    position: relative;
    right: 20% !important;
}

如何修复 Apple 设备上出现的奇怪下划线？

提前致谢！