Change table row height - Bootstrap

Question

I am having trouble changing the height of a table row, using bootstrap. The code i have so far is:

    <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>test@gmail.com</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>test@gmail.com</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>

and:

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

Here is a Fiddle with the code: http://www.bootply.com/xPgWHFFDah

At the moment, it just need to be cut off. I then intend to add some Jquery to change the height on hover. Thanks — ollierexx, May 20 '14 at 06:40

score 15 · Accepted Answer · answered May 20 '14 at 06:41

15

The solution for that is to put div inside with fixed height and overflow like the following:

<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>

look at the updated one from here

answered May 20 '14 at 06:41

Adel

1,468
15
18

1

is there a solution which you don't need to put a div around it? – Eric Luo Jul 01 '17 at 09:34
Yes, you can do it by wrapping whole table instead each td's, See my answer [in here][1] :[1][https://stackoverflow.com/questions/20612535/giving-height-to-table-and-row-in-bootstrap] – Gayan Kavirathne May 20 '18 at 14:33

Change table row height - Bootstrap

1 Answers1