Chrome移动端调试模式下表格列间随机透明间隙问题求助

表格列间出现了一些奇怪的透明间隙，这些间隙会随机出现和消失，无固定规律。该问题仅在Chrome开发者工具的移动端视图模式下出现，目前在Firefox和Edge中未发现此现象。

我已尝试设置border-collapse: collapse，或是border-collapse: separate配合border-spacing: 0，但均无法消除这些间隙。怀疑是Chrome的bug，但并不确定，希望有相关经验的人能提供解决方案。

对应的CSS代码 #

div.table-container{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 500px;
background-color:colors.$lighter_blue;
position: relative;

div.table-wrapper{
    width: 80%;
    height: 70%;
    padding: 0;
    margin: 0 auto;
    font-size: 15px;
    position: absolute;
    overflow: auto;
    scrollbar-width: thin; //for FireFox
    box-shadow: 0px 0 5px 1px rgb(0 0 0 / 30%);

    table.securities-table{
        width: 100%;
        background-color: white;
        border-collapse: separate;
        border-spacing: 0;
        padding:0;
        margin:0;
              
        th,td{
            padding: 5px 10px;
        }
    
        tbody{
            tr:nth-child(odd){
                background-color: #f2f2f2;
            }         
        }      
    
        th{
            color: white;
            background-color: colors.$light-blue;
            text-align: left;
            position: sticky;
            top: -1px;
            z-index: 1;
        }   
    }
}
}

对应的React组件代码 #

const securitiesTableHeader = () => {
    return (
    <thead>
        <tr>
            {securitiesHeader.map((header,i) => 
                <th key={header+i}>{header.headerName}</th>)
            }
        </tr>
    </thead>
    );
}

const securitiesTableCols = (row) => {
    return (
        securitiesHeader.map((header,i) =>
                <td key={row[header.value]+"_"+i}>
                    {getColumnValue(row, header.value)}
                </td>)
    )
}

const securitiesTableRows= () => {
    return (
        <tbody>
            {
                securitiesJSON.map((obj,i) =>
                <tr key="row_"+i>
                    {securitiesTableCols(obj)}
                </tr> 
            )}
        </tbody>
        );
}

return (
<div className = "table-container">
    <div className={`table-wrapper`}>
        <table className= {`securities-table`}>
            {securitiesTableHeader()}
            {securitiesTableRows()}
        </table>
    </div>
</div>

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