Set the height of bootstrap td table into minimum
10,459
you should adjust table row and table data 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;
}
remove padding If you want to do row more smaller
if you give font size 14px height will take 14px
bootstrap
add padding to table padding:8px;
remove this padding
Comments
-
Gagantous almost 2 years
i have tried
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
But none of this type are seems to work for me..
my table is just looks like this
.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>
THere is some people said that you have to use
<div>
tag. Is it possible for didnt use that ?What i want to achieve is, make the td row looks more smaller
( e.g the table row height is
5px
if possible ) -
Gagantous over 6 yearsi wnat to make the table row more smaller
-
Eng_Farghly over 6 yearsremove
padding
I update my answer to your question and addalive demo
to my answer -
Gagantous over 6 yearsnote that i am using bootstrap.. is this would work ?
-
Eng_Farghly over 6 yearsI know this and test my answer with alive demo jsfiddle.net/farghly/fjwamynw/2