html - 将 bootstrap td 表的高度设置为最小

Question

我试过了

How to set maximum height for table-cell?

giving height to table and row in bootstrap

How to set the size of a column in a Bootstrap responsive table

但是这种类型似乎都不适合我..

我的 table 是这样的

  .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>

有些人说你必须使用<div>标签。有没有可能没有使用它？

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

(例如，如果可能，表格行高为 5px)

Answer 1

你应该调整表格行和表格数据alive demo

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

删除填充如果你想做更小的行 如果你给 字体大小 14px 高度将需要 14px bootstrap 添加填充到表格 padding:8px; 删除这个 padding