Can't remove cell spacing between cells in table html css - html

Question

I am trying to create a table using html and css for my webpage. But the problem is that I can't get it to work, there is an obvious grid between cells in my table that I can't get rid of. I have looked for hours on google for a solution without any improvements. Here is an example of what I get with my current code: . As you can see, between each header cell, there is an obvious line. Same goes with the rest of the body cells if I change color there. Here is some styling for the rest of the page if necessary:
<style media="screen">
html, body
{
height: 100%;
}
body
{
margin: 0;
background-color: #292929;
overflow: hidden;
}
nav
{
position: fixed;
top: 0%;
right: 0;
left: 0;
width: 319px;
display: table;
/* margin: 0 auto; */
/* transform: translateY(-50%); */
padding-top: 10px;
padding-left: 10px;
/* added */
table-layout: fixed;
}
nav a
{
width: 70px;
position: relative;
/* width: 33.333%; */
display: table-cell;
text-align: center;
color: #949494;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
padding: 10px 20px;
transition: 0.2s ease color;
}
nav a:before, nav a:after
{
content: "";
position: absolute;
border-radius: 50%;
transform: scale(0);
transition: 0.2s ease transform;
}
nav a:before
{
top: 0;
left: 10px;
width: 6px;
height: 6px;
}
nav a:after
{
top: 5px;
left: 18px;
width: 4px;
height: 4px
}
nav a:nth-child(1):before
{
background-color: red;
}
nav a:nth-child(1):after
{
background-color: yellow;
}
nav a:nth-child(2):before
{
background-color: yellow;
}
nav a:nth-child(2):after
{
background-color: orange;
}
nav a:nth-child(3):before
{
background-color: #00e2ff;
}
nav a:nth-child(3):after
{
background-color: #89ff00;
}
nav a:nth-child(4):before
{
background-color: blue;
}
nav a:nth-child(4):after
{
background-color: #00e2ff;
}
nav a:nth-child(5):before
{
background-color: purple;
}
nav a:nth-child(5):after
{
background-color: palevioletred;
}
nav a:nth-child(6):before
{
background-color: #ff008c;
}
nav a:nth-child(6):after
{
background-color: pink;
}
nav a:nth-child(7):before
{
background-color: purple;
}
nav a:nth-child(7):after
{
background-color: red;
}
#indicator
{
position: absolute;
left: 4%;
bottom: 0;
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 5px;
transition: 0.2s ease left;
}
nav a:hover
{
color: #fff;
}
nav a:hover:before, nav a:hover:after
{
transform: scale(1);
}
nav a:nth-child(1):hover ~ #indicator
{
background: linear-gradient(130deg, red, yellow);
}
nav a:nth-child(2):hover ~ #indicator
{
left: calc(4% + 100%/7);
background: linear-gradient(130deg, yellow, orange);
}
nav a:nth-child(3):hover ~ #indicator
{
left: calc(4% + 100%/7 * 2);
background: linear-gradient(130deg, #00e2ff, #89ff00);
}
nav a:nth-child(4):hover ~ #indicator
{
left: calc(4% + 100%/7 * 3);
background: linear-gradient(130deg, blue, #00e2ff);
}
nav a:nth-child(5):hover ~ #indicator
{
left: calc(4% + 100%/7 * 4);
background: linear-gradient(130deg, purple, palevioletred);
}
nav a:nth-child(6):hover ~ #indicator
{
left: calc(4% + 100%/7 * 5);
background: linear-gradient(130deg, #ff008c, pink);
}
nav a:nth-child(7):hover ~ #indicator
{
left: calc(4% + 100%/7 * 6);
background: linear-gradient(130deg, purple, red);
}
#back_btn {
display: block;
position: fixed;
left: 0;
bottom: 0;
padding: 10px 14px;
margin: 20px;
color: #fff;
font-family: Arial;
font-size: 14px;
text-decoration: none;
background-color: #000;
border-radius: 4px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
z-index: 125;
}
</style>
And here is the main styling for the table:
<style media="screen"> /* table */
/* schedule css */
.schedule_holder {
/* center */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: auto;
height: 70%;
margin-top: 4%;
border-radius: 5px;
/* box-shadow:
1px 1px 0 #444,
2px 2px 0 #444,
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444,
5px 5px 15px #999; */
/* center end */
}
/* rest of table */
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
padding: 2rem;
}
table {
text-align: left;
position: relative;
border-collapse: collapse;
background-color: white;
border-radius: 5px;
}
thead {
background: #565656;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
th, td {
padding: 10px;
border-collapse: collapse;
}
tr th {
/* background: #565656; */
background-color: rgba(0, 0, 0, 0);
color: white;
}
tr.red th {
background: red;
color: white;
}
tr.green th {
background: green;
color: white;
}
tr.purple th {
background: purple;
color: white;
}
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
/* box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); */
}
</style>
Along with the html body:
<body>
<nav id="days_nav">
Måndag
Tisdag
Onsdag
Torsdag
Fredag
Lördag
Söndag
<div id="indicator"></div>
</nav>
<div class="schedule_holder" id="monday_holder">
<table>
<thead>
<tr>
<th>Lektion</th>
<th>Lärare</th>
<th>Start</th>
<th>Slut</th>
<th>Inställd?</th>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Quas!</td>
<td>Velit.</td>
<td>Quisquam?</td>
<td>Rerum?</td>
<td>Iusto?</td>
<td>Quis.</td>
</tr>
<tr>
<td>Voluptates!</td>
<td>Fugiat?</td>
<td>Alias.</td>
<td>Doloribus.</td>
<td>Veritatis.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Maiores.</td>
<td>Ab.</td>
<td>Accusantium.</td>
<td>Ullam!</td>
<td>Eveniet.</td>
<td>Quis.</td>
</tr>
</tbody>
</table>
</div>
Tillbaka
<script type="text/javascript">
</script>
</body>
I hope somebody is able to help me. Thanks in advance!
EDIT:
The main style was copied from here, where it did work without any problems, but as soon as I copied it into my code it started to have some troubles, the same goes with other tables I have tried to create.

Answer 1

When I copy exactly what you have for css and html, I don't see the white lines. BUT... I think it may have something to do with the last style you have in the table stylesheet.
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
/* box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); */
}
What happens if you change the background color to a bright color like red or orange? Do the grid line colors change?
EDIT:
I looked at the link you provided. I was able to see the issue in Safari but only when I zoom. I believe it is rendering issue caused by position: absolute and perhaps the transform on <div class="schedule_holder">
Updating the styles for that element worked for me.
.schedule_holder {
overflow: auto;
height: 70%;
margin-top: 4%;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}

Answer 2

It doesnt look like a real border, but perhaps a rendering/rounding issue (half pixel thing). Make sure you havent zoomed in/out in your browser, and resize your window to see if it persist.
You could try to set a red background color on the body or table, to see if that white line turns red. If so it would mean there is a space rendered in between, which you could get rid of by setting a background color on the tr instead of thead/th.