CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Gagantous
Gagantous

Reputation: 518

Set the height of bootstrap td table into minimum

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 )

Upvotes: 3

Views: 12416

Answers (1)

Eng_Farghly
Eng_Farghly

Reputation: 2997

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

Upvotes: 3

Related Questions