启用引导程序时，行之间不需要的空白区域

Question

我正在创建一张桌子，突然间这个空格出现在行之间。我尝试了一些东西，但无法让它消失。

后来意识到只有在启用了bootstrap时才会发生这种情况 当我删除bootstrap css文件时，它会被修复。

这里没有引导程序

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

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

尝试将此添加到您的CSS中 - 您已经设置了类。你只需要将border-top添加到该部分。

fields = cgi.FieldStorage()
s = fields.getvalue('s')
request = {
   's' : s,
   'f' : 'snl1d1t1c1p2ohgv',
   'e' : '.csv'
}
parms = urllib.parse.urlencode(request)
u=urllib.request.urlopen("http://download.finance.yahoo.com/d/quotes.csv?s=IBM&f=snl1d1t1c1p2ohgv&e=.csv"+parms)
reader=csv.DictReader(u['symbol','name','price','date','time','change','percent','open','high','low','volume'])
record=next(reader)

Answer 2

您可以使用：

.table > tbody > tr > td {
    border-top: none;
}

当然，只有在Bootstrap导入后执行CSS时才会有效。否则，您需要border-top: none !important来强制覆盖。