Unwanted white space between rows when bootstrap enabled - html

Question

I was creating a table and suddenly this white space showed up between rows. I tried some things but couldn't get it to go away.
Later realised that it happened only when bootstrap was enabled
When I remove bootstrap css file it gets fixed.
Here is without bootstrap
body {
margin: 0;
background-image: url(https://ambrosia-servers.com/adminactivity/images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
top: 0px;
}
.table th h1 {
font-weight: bold;
font-size: 1em;
text-align: center;
color: #C6B642;
padding: 5px;
}
.table td {
font-weight: bold;
font-size: 1em;
color: #8e8e8e;
padding: 10px;
}
.table {
text-align: left;
overflow: hidden;
width: 100%;
display: table;
border-collapse: collapse;
/*padding: 0 0 8em 0;*/
}
.table td,
.table th {
padding:0;
margin:0;
}
.table tr:nth-child(odd) {
background-color: #252424;
}
.table tr:nth-child(even) {
background-color: #000000;
border: black 0px solid;
}
.table th {
background-color: #2B2B1B;
}
.table td:first-child {
background-color: #2b2b1b;
color: #C6B642;
font-weight: bold;
}
.table tr:hover {
background-color: #464A52;
}
.table td:hover {
background-color: #C6B642;
color: #403E10;
font-weight: bold;
transition-delay: 0s;
transition-duration: 0.15s;
transition-property: all;
}
#media (max-width: 800px) {
.table td:nth-child(4),
.table th:nth-child(4) {
display: none;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<table class="table">
<thead>
<tr>
<th><h1>Sites</h1></th>
<th><h1>Views</h1></th>
<th><h1>Clicks</h1></th>
<th><h1>Average</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td>9518</td>
<td>6369</td>
<td>01:32:50</td>
</tr>
<tr>
<td>Twitter</td>
<td>7326</td>
<td>10437</td>
<td>00:51:22</td>
</tr>
<tr>
<td>Amazon</td>
<td>4162</td>
<td>5327</td>
<td>00:24:34</td>
</tr>
<tr>
<td>LinkedIn</td>
<td>3654</td>
<td>2961</td>
<td>00:12:10</td>
</tr>
<tr>
<td>CodePen</td>
<td>2002</td>
<td>4135</td>
<td>00:46:19</td>
</tr>
<tr>
<td>GitHub</td>
<td>4623</td>
<td>3486</td>
<td>00:31:52</td>
</tr>
</tbody>
Bootstrap enabled
body {
margin: 0;
background-image: url(https://ambrosia-servers.com/adminactivity/images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
top: 0px;
}
.table th h1 {
font-weight: bold;
font-size: 1em;
text-align: center;
color: #C6B642;
padding: 5px;
}
.table td {
font-weight: bold;
font-size: 1em;
color: #8e8e8e;
padding: 10px;
}
.table {
text-align: left;
overflow: hidden;
width: 100%;
display: table;
border-collapse: collapse;
/*padding: 0 0 8em 0;*/
}
.table td,
.table th {
padding:0;
margin:0;
}
.table tr:nth-child(odd) {
background-color: #252424;
}
.table tr:nth-child(even) {
background-color: #000000;
border: black 0px solid;
}
.table th {
background-color: #2B2B1B;
}
.table td:first-child {
background-color: #2b2b1b;
color: #C6B642;
font-weight: bold;
}
.table tr:hover {
background-color: #464A52;
}
.table td:hover {
background-color: #C6B642;
color: #403E10;
font-weight: bold;
transition-delay: 0s;
transition-duration: 0.15s;
transition-property: all;
}
#media (max-width: 800px) {
.table td:nth-child(4),
.table th:nth-child(4) {
display: none;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<table class="table">
<thead>
<tr>
<th><h1>Sites</h1></th>
<th><h1>Views</h1></th>
<th><h1>Clicks</h1></th>
<th><h1>Average</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td>9518</td>
<td>6369</td>
<td>01:32:50</td>
</tr>
<tr>
<td>Twitter</td>
<td>7326</td>
<td>10437</td>
<td>00:51:22</td>
</tr>
<tr>
<td>Amazon</td>
<td>4162</td>
<td>5327</td>
<td>00:24:34</td>
</tr>
<tr>
<td>LinkedIn</td>
<td>3654</td>
<td>2961</td>
<td>00:12:10</td>
</tr>
<tr>
<td>CodePen</td>
<td>2002</td>
<td>4135</td>
<td>00:46:19</td>
</tr>
<tr>
<td>GitHub</td>
<td>4623</td>
<td>3486</td>
<td>00:31:52</td>
</tr>
</tbody>
</table>

Answer 1

Try adding this to your css - you already have the classes set. you just need to add the border-top to that section.
.table td, .table th {
border: none !important;
}

Answer 2

You can use:
.table > tbody > tr > td {
border-top: none;
}
Of course, it'll only works if your CSS is executed after the Bootstrap import. Otherwise, you'll need a border-top: none !important to force the override.