Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change table row height - Bootstrap [duplicate]

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

and:

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

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

like image 867
ollierexx Avatar asked May 20 '14 06:05

ollierexx


People also ask

What is Bootstrap row height bootstrap?

Bootstrap Row Height Bootstrap is one of the fastest ways to, well, bootstrap a project. The library includes a lot of helpful CSS utility classes to get a responsive, mobile first layout up and running quickly. But what if you start adding your own CSS rules to the mix, but they don't seem to have any affect on the layout?

How do I change the size of a HTML table?

HTML tables can have different sizes for each column, row or the entire table. Use the style attribute with the width or height properties to specify the size of a table, row or column.

How do I set the height of a table in CSS?

CSS Table Size ❮ PreviousNext ❯ Table Width and Height The width and height of a table are defined by the widthand heightproperties. The example below sets the width of the table to 100%, and the height of the <th> elements to 70px: Example table { width: 100%; th { height: 70px; Try it Yourself »

How do I set the height and size of a column?

To set the size of a specific column, add the style attribute on a <th> or <td> element: To set the height of a specific row, add the style attribute on a table row element:


1 Answers

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

like image 54
Adel Avatar answered Sep 28 '22 16:09

Adel