Unexpected transparent gap between columns in a table - html

Question

There are some strange transparent gaps between columns in a table
Here is 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;
}
}
}
}
here is HTML
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>
I have tried border-collapse: collapse or separate with border-spacing: 0 but it couldn't remove those "transparent" gaps. Even weirder, those gaps appear and disappear randomly without any specific order/pattern. I only see that in Chrome in mobile view mode in Developer Tools(Chrome inspect) and as far as I know, I didn't see that from Firefox or Edge. I suspect that it is a bug from Chrome but I am quite sure. If anyone has seen this before, I appreciate if you could help me solve this.

Answer 1

div.table-wrapper{
width: 80%;
height: 70%;
padding: 0;
margin: 0 auto;
font-size: 15px;
overflow: auto;
scrollbar-width: thin; //for FireFox
table.securities-table{
width: 100%;
background-color: white;
border-collapse: separate;
border-spacing: 0;
padding:0;
margin:0;
th,td{
padding: 5px;
}
tbody{
tr:nth-child(odd){
background-color: #f2f2f2;
}
}
th{
color: white;
background-color: colors.$light-blue;
text-align: left;
top: -1px;
}
}
}