2014-05-20 29 views
5

Ho problemi a modificare l'altezza di una riga della tabella, utilizzando il bootstrap. Il codice che ho finora è:Modifica altezza riga tabella - Bootstrap

<table class="table table-bordered table-hover type-list2"> 
    <tr> 
     <th>#</th> 
     <th>DSP Type</th> 
     <th>Email</th> 
     <th>Code Type</th> 
     <th>Dispatch Time</th> 
     <th>Codes</th> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Email</td> 
     <td>[email protected]</td> 
     <td>7 Day</td> 
     <td>2014-05-20 15:42:59</td> 
     <td>6</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Manual</td> 
     <td>[email protected]</td> 
     <td>12 Month</td> 
     <td>2014-05-20 15:42:59</td> 
     <td> 
     WXJ79-P33MM-RX7BP-QHW86-AAAAA 
     <br>HW382-6TPF3-RHV63-3W8QP-AAAAA 
     <br>FHKV2-K376Y-3Q984-36C7C-AAAAA 
     <br>RHXCM-KC24C-6B7T9-TBFB3-AAAAA 
     <br>MD8QM-VXBQW-B72Q7-CR3BM-AAAAA 
     <br>GXFGV-KX7TP-82H2H-DRFHM-AAAAA 
     <br>VQV2F-P7VKM-MBBMB-M7JYC-AAAAA 
     <br>KG4VD-HWGMM-6MJCT-G7PVC-AAAAA 
     </td> 
    </tr> 

e:

tr { 
    max-height: 35px !important; 
    height: 35px !important; 
} 

Ecco un violino con il codice: http://www.bootply.com/xPgWHFFDah

+0

Al momento, deve solo essere tagliato. Quindi intendo aggiungere alcuni Jquery per modificare l'altezza al passaggio del mouse. Grazie – ollierexx

risposta

11

La soluzione per questo è di mettere div all'interno con altezza fissa e overflow come il seguente:

<td> 
    <div style="height: 50px; overflow:auto;"> 
     WXJ79-P33MM-RX7BP-QHW86-AAAAA 
     <br>HW382-6TPF3-RHV63-3W8QP-AAAAA 
     <br>FHKV2-K376Y-3Q984-36C7C-AAAAA 
     <br>RHXCM-KC24C-6B7T9-TBFB3-AAAAA 
     <br>MD8QM-VXBQW-B72Q7-CR3BM-AAAAA 
     <br>GXFGV-KX7TP-82H2H-DRFHM-AAAAA 
     <br>VQV2F-P7VKM-MBBMB-M7JYC-AAAAA 
     <br>KG4VD-HWGMM-6MJCT-G7PVC-AAAAA 
    </div> 
</td> 

loo k a quello aggiornato from here

+0

c'è una soluzione che non hai bisogno di mettere un div intorno ad esso? –

Problemi correlati