html {
background-color: #fff;
font-family: Arial;
}
body {
display: flex;
justify-content: center;
}
td {
background-color: #fafafa;
}
th:first-child, td:first-child {
border-left-style: none;
}
th:last-child, td:last-child {
border-right-style: none;
}
th:first-child {
border-top-left-radius: 1rem;
}
th:last-child {
border-top-right-radius: 1rem;
}
tr:last-child td {
border-bottom-style: none;
background-color: #efefef;
}
tr:last-child td:first-child {
border-bottom-left-radius: 1rem;
}
tr:last-child td:last-child {
border-bottom-right-radius: 1rem;
}<html>
<head>
<style>
::selection {
background-color: #0dd; color: #099;
}
table, th, td {
padding: 1rem;
border-style: solid;
border-color: #eee;
border-collapse: collapse;
}
table {
margin-top: 1rem;
border-style: none;
}
th {
border-top-style: none;
border-color: #111;
background-color: #222;
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<table>
<tr> <th>One</th><th>Two</th><th>Three</th> </tr>
<tr> <td>four</td> <td>five</td><td>six</td> </tr>
<tr> <td>seven</td> <td>eight</td><td>nine</td> </tr>
</table>
</body>
</html>
The vertical table borders in the <th> elements are extending down into the horizontal top border on the <td> elements below. How do we prevent this and have the borders look normal without "bleeding" into each other?
I've stripped this down to a very simple example with simple code as to isolate the problem. I'm still not finding a solution.
Edit: This is only seeming to appear in Chrome currently. Not sure if this is a known bug with a quick hack/fix. Any help would be appreciated.