对于标题为column1和column2的一组表，如何删除文本框和td之间的填充和边距。我想减少空间。
此外，仅当表格具有5行以上时，才如何放置垂直滚动。
请帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading text-center" style="background-color:red;color:white;">Sources</div>
<div class="panel-body">
<table class="table table-bordered">
<tr>
<td>
<table class="table table-bordered" style="border:2px solid green;">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr style="border:2px solid brown;">
<td style="border:2px solid brown;">
<input type="text" size="10" />
</td>
<td style="border:2px solid brown;">
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<a href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
</tfoot>
</table>
</td>
<td>
<table class="table table-bordered">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<a href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
</tfoot>
</table>
</td>
<td>
<table class="table table-bordered">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<a href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
</tfoot>
</table>
</td>
<td>
<table class="table table-bordered">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" /> </td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
<tr>
<td>
<input type="text" size="10" />
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<a href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
</td>
<td>
<input type="text" size="10" />
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
请帮助进行此格式化。我只是想使其紧凑，以减少列边框和文本框之间的空间