CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Klajdi
Klajdi

Reputation: 337

Unwanted white space between rows when bootstrap enabled

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>

Upvotes: 1

Views: 631

Answers (2)

Saurav Jamwal
Saurav Jamwal

Reputation: 374

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.

Upvotes: 0

Carla
Carla

Reputation: 56

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; 
}

Upvotes: 2

Related Questions