如何在Bootstrap表格形式中纠正奇怪的间距行为？

Question

出于某种原因，我的桌子间距太大了。有些东西导致填充关闭，但我不确定它在哪里。几乎所有的CSS都是表的基本Bootstrap代码。

的 HTML

<div class="form-group">
        <div class="table-responsive">
              <table class="table">
                <thead>
                  <tr>
                    <th>&nbsp;</th>
                    <th>Team</th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                    <th>11</th>
                    <th>12</th>
                    <th>R</th>
                    <th>H</th>
                    <th>E</th>
                    <th>Record</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>V</td>
                    <td><input class="form-control team-wide" type="text"  name="name" id="name"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning1" id="inning1"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning2" id="inning2"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning3" id="inning3"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning4" id="inning4"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning5" id="inning5"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning6" id="inning6"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning7" id="inning7"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning8" id="inning8"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning9" id="inning9"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning10" id="inning10"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning11" id="inning11"></td>
                    <td><input class="form-control inning-wide" type="text"  name="inning12" id="inning12"></td>
                    <td><input class="form-control inning-wide" type="text"  name="R" id="R"></td>
                    <td><input class="form-control inning-wide" type="text"  name="H" id="H"></td>
                    <td><input class="form-control inning-wide" type="text"  name="E" id="E"></td>
                    <td><input class="form-control inning-wide" type="text"  name="Record" id="Record"></td>

                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                  </tr>
                </tbody>
              </table>
        </div><!-- /.table-responsive -->  
    </div> 

的 CSS

.team-wide {
width: 80px;
margin-left: 0;
}

@media (max-width: 2000px) { /*scrollable inside my container*/
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid #dddddd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
  }
}

感谢任何帮助。

Answer 1

默认情况下，Bootstrap .table单元格周围有8px填充，您可以使用自己的规则覆盖它。

.table>thead>tr>th, 
.table>tbody>tr>th, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>tbody>tr>td, 
.table>tfoot>tr>td {
  padding: 2px;
}

此外，如果将标题文本与中心对齐，它会看起来更好......

.table>thead>tr>th {
  text-align: center;
}

Answer 2

Bootstrap文档有一个解决方案：

简明表 添加.table-condensed，通过将单元格填充减半来使表更紧凑。

将表格标签更改为

<table class="table table-condensed">

请参阅文档here