将Bootstrap表格中的td单元格高度设置为最小值。

Question

我已经尝试了以下内容：

如何设置表格单元格的最大高度？

在Bootstrap中为表格和行指定高度

如何在Bootstrap响应式表格中设置列的大小

但是似乎这些方法都对我无效。

我的表格看起来就像这样。

  .table {
  font-size: 10px;
}

.table tr td {
   height: 10px;
    width: 10px;
}
tr {
   line-height: 5px;
   min-height: 5px;
   height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table  class="table table-bordered">
    <thead>
      <tr>
      <th rowspan="2" >Tgl. Group Temuan</th>
      <th rowspan="2">Ket</th>
      <th colspan="3">Temuan Pemeriksaan (TP)</th>
      <th colspan="3">TP yang ditindak lanjuti (TP)</th>
      <th rowspan="2">TPB s/d Bulan Ini</th>
      </tr>
      <tr>
      <th>TP s/d Bulan Lalu</th>
      <th>TP Bulan ini</th>
      <th>TP s/d Bulan ini</th>
      <th>TP s/d Bulan Lalu</th>
      <th>TP Bulan ini</th>
      <th>SUB TOTAL</th>
      </tr>
    </thead>
    <tbody>
          <tr>
        <td rowspan="2"></td>
        <td>Kejadian</td>
        <td >12</td>
        <td>12</td>
        <td>24</td>
        <td>0</td>
      <td>0</td>
      <td>0</td>
      <td  rowspan="2"></td>
      </tr>
      <tr>
        <td>Rp</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      <td>0</td>
      <td>0</td>
      </tr>
            <tr>
        <td rowspan="2">01</td>
        <td>Kejadian</td>
        <td >10</td>
        <td>4</td>
        <td>14</td>
        <td>2</td>
      <td>2</td>
      <td>4</td>
      <td  rowspan="2"></td>
      </tr>
      <tr>
        <td>Rp</td>
        <td>55.950.000</td>
        <td>55.950.000</td>
        <td>86.900.000</td>
        <td>10.000.000</td>
      <td>0</td>
      <td>10.000.000</td>
      </tr>
            <tr>
        <td rowspan="2">0101</td>
        <td>Kejadian</td>
        <td >4</td>
        <td>1</td>
        <td>5</td>
        <td>1</td>
      <td>1</td>
      <td>2</td>
      <td  rowspan="2"></td>
      </tr>
      <tr>
        <td>Rp</td>
        <td>18.000.000</td>
        <td>18.000.000</td>
        <td>27.000.000</td>
        <td>10.000.000</td>
      <td>0</td>
      <td>10.000.000</td>
      </tr>
            <tr>
        <td rowspan="2">0102</td>
        <td>Kejadian</td>
        <td >4</td>
        <td>1</td>
        <td>5</td>
        <td>1</td>
      <td>1</td>
      <td>2</td>
      <td  rowspan="2"></td>
      </tr>
      <tr>
        <td>Rp</td>
        <td>16.950.000</td>
        <td>16.950.000</td>
        <td>17.900.000</td>
        <td>0</td>
      <td>0</td>
      <td>0</td>
      </tr>
            <tr>
        <td rowspan="2">0103</td>
        <td>Kejadian</td>
        <td >2</td>
        <td>2</td>
        <td>4</td>
        <td>0</td>
      <td>0</td>
      <td>0</td>
      <td  rowspan="2"></td>
      </tr>
      <tr>
        <td>Rp</td>
        <td>21.000.000</td>
        <td>21.000.000</td>
        <td>42.000.000</td>
        <td>0</td>
      <td>0</td>
      <td>0</td>
      </tr>
            <tr>
        <td rowspan="2">02</td>
        <td>Kejadian</td>
        <td >7</td>
        <td>2</td>
        <td>9</td>
        <td>0</td>
      <td>0</td>
      <td>0</td>
      <td  rowspan="2"></td>
      </tr>
      <tr>
        <td>Rp</td>
        <td>26.000.000</td>
        <td>26.000.000</td>
        <td>26.000.000</td>
        <td>46.000.000</td>
      <td>0</td>
      <td>46.000.000</td>
      </tr>
            <tr>
        <td rowspan="2">0201</td>
        <td>Kejadian</td>
        <td >1</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
      <td>0</td>
      <td>0</td>
      <td  rowspan="2"></td>
      </tr>
      <tr>
        <td>Rp</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      <td>0</td>
      <td>0</td>
      </tr>
       </tbody>
    <tfoot>
     <tr>
      <td rowspan="2">TOTAL</td>
      <td>Kejadian</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      </tr>
      <tr>
        <td>Rp</td>
         <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      </tr>
    </tfoot>
    </table>

有些人说你必须使用

标签。不使用是否可能？

我想实现的是让td行看起来更小。

例如，如果可能的话，表格行高为5px。

- Gagantous

Answer 1

您应该调整表格行和表格数据。演示链接

.table {
  font-size: 10px;
}

.table tr,.table td {
   height: 10px;
   text-align: center
}

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

移除padding 如果您想让行更小 如果您使用字号14px，则高度将为14px。 Bootstrap在表格中添加了padding:8px;，请移除该padding。

- Eng_Farghly

---

我想把表格行变得更小。 - Gagantous

删除padding。我更新了对你问题的回答，并在我的回答中添加了活动演示。 - Eng_Farghly

请注意，我正在使用Bootstrap。这样会起作用吗？ - Gagantous

我知道这个，并且用一个实时演示来测试我的答案：https://jsfiddle.net/farghly/fjwamynw/2/ - Eng_Farghly