将引导 td 表的高度设置为最小值答案

【问题标题】：Set the height of bootstrap td table into minimum将引导 td 表的高度设置为最小值
【发布时间】：2018-04-16 17:33:30
【问题描述】：

我试过了

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 {
  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）

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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; 
}

如果你想让行更小，请移除填充如果你给font size 14px height will take 14px bootstrap 向表格添加填充 padding:8px; 删除此 padding

【讨论】：

我想让表格行更小
删除 padding 我更新了我对您问题的回答并将alive demo 添加到我的回答中
请注意，我正在使用 bootstrap .. 这行得通吗？
我知道这一点，并用现场演示测试我的答案jsfiddle.net/farghly/fjwamynw/2