I have a table that is rendered from a gridview in ASP.NET. I'm using CSS to create scroll bars on the table. I notice when I decrease the zoom everything fits and aligns properly at say 67%, but when at 100%, the header columns are misaligned and also the second to last row. What could be causing this?
I've tried setting min-width on the thead but doesn't seem to have any effect.
table.grdPCO {
display: flex;
flex-direction: column;
height: 100%;
}
table.grdPCO thead,
table.grdPCO tbody {
display: block;
}
table.grdPCO thead {
margin-right: 0px;
min-width: 300px;
}
table.grdPCO tbody {
flex: 1;
overflow-y: scroll;
}
table.grdPCO tr {
width: 100%;
display: flex;
}
table.grdPCO tr td,
table.grdPCO tr th {
display: block;
flex: 1;
}<table class="grdPCO"><tbody><tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr></tbody></table>I would like the columns to align up no matter the zoom level.