我试过了
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
)
答案 0 :(得分: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