設置引導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 { 
 
    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; 
} 

刪除填充如果你想要做的行更小 如果你給font size 14px height will take 14px bootstrap添加填充表padding:8px;刪除此padding