半值的边距会打破表格梯度

Question

一年多以来，我一直在项目中使用rich：datatable。它具有大量的替代样式，使其看起来更漂亮，直到Chrome v69（我相信它是v69，至少它发生在大约一个月前的几个更新之前），一切都差不多。有趣的是，Opera Neon渲染表格没有问题。

困境

这是我的表标题以前的样子：

这是Chrome v70现在的样子：

您可以看到渐变是如何完全破坏的。这显然是一个CSS问题，但是一个棘手的问题。

研究

摆弄css，我设法找出由于margin: auto;属性而导致渐变被破坏的原因，特别是因为id的左边和右边增加了边距值。内容区域的最大宽度为1400px，这在左边和右边留出251.5px的边距，这些边距总计为1903，再加上滚动条的未使用空间。重要的是保证金的值为* .5。

如果我删除渐变，它将以某种方式变为确定：

如果我将浏览器视图比例提高到150％，这消除了所有的空白，那么也可以：

如果我删除自动页边距，则所有内容也都可以，但是所有内容都向左对齐：

但是在此处添加margin-left: 10.5px;会再次破坏一切：

我尝试将overflow: overlay;添加到正文中，以便获得没有一半的余量值。它解决了问题，但是该属性已被弃用，并且在Webkit浏览器之外不受支持，因此，我想避免这种情况。

这一切都证明具有半值的边距会以某种方式影响表格列和渐变背景。但坦率地说，我不知所措，尝试其他方法。我只是似乎无法理解这些值如何以这种方式打破梯度。

很难复制表和项目外部的所有样式或提供代码示例。我猜这里的重要属性是border-collapse: collapse;和border-spacing: 0;。

我设法在Codepen上重现了它： Codepen

还有以下代码段：

table thead tr {
	background: -webkit-linear-gradient(#1F5BD7, #00AFFF);
}
table.margin1 {
	border-collapse: collapse;
	margin-left: 10.5px;
}

table.margin2 {
	border-collapse: collapse;
	margin-left: 10px;
}

<table class="margin1">
	<thead>
		<tr>
			<th>
				Number
				</th>
			<th>
				Card Vendor
				</th>
			<th>
				Issuer
				</th>
			</tr>
		</thead>
	<tbody>
		<tr>
			<td>S0157</td>
			<td>gsg gfdgsdgfds</td>
			<td>fgsgfds gfdsgs</td>
			</tr>
		</tbody>
	</table>

<table class="margin2">
	<thead>
		<tr>
			<th>
				Number
				</th>
			<th>
				Card Vendor
				</th>
			<th>
				Issuer
				</th>
			</tr>
		</thead>
	<tbody>
		<tr>
			<td>S0157</td>
			<td>gsg gfdgsdgfds</td>
			<td>fgsgfds gfdsgs</td>
			</tr>
		</tbody>
	</table>