how to set table row height to fixed value for all tables

Question

Report contains 4 tables. All rows should have same height.

I tried anwer from

by using

    .table td, .table th {
        height: 63px;
    }

Howewer if left table second rows has more lines, this is ignored. I also tried to use !important and set tr height, but its height is still ignored.

How to fix this ? Bootstrap 3 and jquery are used.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


  <style type="text/css">
    .table {
      width: 100%;
      margin-bottom: 0;
    }

.table td, .table th, .table tr {
height: 72px;
white-space: normal;
word-break: break-all !important;
word-wrap: break-word !important;
}

    .right td,
    .right th {
      width: 78px;
    }
    .left td,
    .left th {
      width: 78px;
    }
    .left,
    .right {
      float: left;
      height: 450px;
      box-sizing: border-box;
    }
    .lbody {
      overflow-x: scroll;
      overflow-y: hidden;
      height: 400px;
    }
    .left .table,
    .right .table {
      table-layout: fixed;
    }
    .rbody {
      overflow: scroll;
      height: 400px;
    }
    .rheader,
    .lheader {
      overflow-x: hidden;
      overflow-y: hidden;
    }
    .left {
      width: 15%;
      /*15%; */
    }
    .right {
      width: 50%;
      /*85%;*/
    }
  </style>

  <script>
    $(function() {
      $(".lbody").on("scroll", function() {
        $(".rbody").scrollTop($(this).scrollTop());
      });

      $(".rbody").on("scroll", function() {
        $(".lbody").scrollTop($(this).scrollTop());
      });

      $(".rbody").on("scroll", function() {
        $(".rheader").scrollLeft($(this).scrollLeft());

      });

      $(".lbody").on("scroll", function() {
        $(".lheader").scrollLeft($(this).scrollLeft());

      });


      $('#rheader tr, #rbody tr').each(function() {
        var tr = $(this);
        var children = tr.children();
        $(children[0]).hide();
        $(children[1]).hide();
      });
    });
  </script>


</head>

<body>
  <div class="left">
    <div class="lheader">
      <table class="table table-bordered table-striped table-condensed">
        <thead>
          <tr>
            <th>Kuupäev</th>
            <th>Märkused</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Viimane</td>
            <td>hind</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="lbody">
      <table class="table table-bordered table-striped table-condensed table-hover">
        <tbody>
          <tr>
            <td>22.04.2016</td>
            <td nowrap>Arve 22.04.2016,Tellimus 161813 22.04.2016</td>
          </tr>
          <tr>
            <td>29.03.2016</td>
            <td nowrap>Tellimus 161413 28.03.2016</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="right">
    <div class="rheader">
      <table class="table table-bordered table-striped table-condensed" id="rheader">
        <thead>
          <tr>
            <th scope="col">
              kuupaev
            </th>
            <th scope="col">
              m&#228;rkused
            </th>
            <th scope="col">
              5B2
            </th>
            <th scope="col">
              91in1
            </th>
            <th scope="col">
              AutoGreaseWhite
            </th>
            <th scope="col">
              BERBrake30L
            </th>
            <th scope="col">
              BERceramic
            </th>
            <th scope="col">
              BERhermeetik
            </th>
            <th scope="col">
              BERhss19osa
            </th>
            <th scope="col">
              BERklaasilapp
            </th>
            <th scope="col">
              BERviimlapp
            </th>
            <th scope="col">
              BER&#245;lilapid50tk
            </th>
            <th scope="col">
              BRNsoftLapp
            </th>
            <th scope="col">
              Etch16ml
            </th>
            <th scope="col">
              Heebel
            </th>
            <th scope="col">
              HSS6.0
            </th>
            <th scope="col">
              HSS8.0
            </th>
            <th scope="col">
              HST12S
            </th>
            <th scope="col">
              HSTClear12mm
            </th>
            <th scope="col">
              KD-400
            </th>
            <th scope="col">
              KENTseep3L
            </th>
            <th scope="col">
              Laadija
            </th>
            <th scope="col">
              LiimGel
            </th>
            <th scope="col">
              LiimVedel
            </th>
            <th scope="col">
              NAPFC
            </th>
            <th scope="col">
              Piliiatslamp
            </th>
            <th scope="col">
              PlazTex
            </th>
            <th scope="col">
              PPDG
            </th>
            <th scope="col">
              PSG-Skang
            </th>
            <th scope="col">
              PTFE+
            </th>
            <th scope="col">
              SDL
            </th>
            <th scope="col">
              ShowrGlaz
            </th>
            <th scope="col">
              SOS
            </th>
            <th scope="col">
              Speedy500
            </th>
            <th scope="col">
              SRA
            </th>
            <th scope="col">
              SRP
            </th>
            <th scope="col">
              SWG3
            </th>
            <th scope="col">
              TyreDress
            </th>
            <th scope="col">
              USBjuhe
            </th>
            <th scope="col">
              Veljepuhasti
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td>Viimane hind</td>
            <td>20,05000</td>
            <td>8,50000</td>
            <td>5,70000</td>
            <td>60,00000</td>
            <td>5,00000</td>
            <td>8,35000</td>
            <td>30,00000</td>
            <td>1,60000</td>
            <td>1,40000</td>
            <td>25,00000</td>
            <td>2,30000</td>
            <td>4,50000</td>
            <td>2,55000</td>
            <td>5,60000</td>
            <td>6,70000</td>
            <td>9,31000</td>
            <td>11,00000</td>
            <td>4,30000</td>
            <td>18,00000</td>
            <td>4,50000</td>
            <td>8,00000</td>
            <td>7,50000</td>
            <td>0,00000</td>
            <td>0,00000</td>
            <td>9,85000</td>
            <td>9,30000</td>
            <td>16,50000</td>
            <td>9,15000</td>
            <td>0,00000</td>
            <td>21,35000</td>
            <td>7,20000</td>
            <td>11,70000</td>
            <td>8,50000</td>
            <td>0,00000</td>
            <td>5,70000</td>
            <td>7,55000</td>
            <td>1,50000</td>
            <td>19,00000</td>
          </tr>
        </tbody>
      </table>

    </div>

    <div class="rbody">
      <table class="table table-bordered table-striped table-condensed table-hover" id="rbody">
        <tbody>
          <tr>
            <td>22.04.2016 0:00.00</td>
            <td>Arve 22.04.2016,Tellimus 161813 22.04.2016</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>6,0000</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>29.03.2016 0:00.00</td>
            <td>Tellimus 161413 28.03.2016</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1,0000</td>
            <td>4,0000</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1,0000</td>
            <td></td>
            <td></td>
            <td>1,0000</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>3,0000</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>28.03.2016 0:00.00</td>
            <td>Arve 29.03.2016</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1,0000</td>
            <td>4,0000</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1,0000</td>
            <td></td>
            <td></td>
            <td>1,0000</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>3,0000</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</body>

</html>

PS: you don't need `type="text/css"`. – gcampbell Jun 18 '16 at 12:46 — gcampbell, Jun 18 '16 at 12:46

Parag Bhayani · Accepted Answer · 2016-06-18T12:59:00.773

1

Add div to every tds and put content inside the div to achieve this...

.table td, .table th, .table tr,.table div{
    height: 63px !important;
}

edited Jun 18 '16 at 12:59

answered Jun 18 '16 at 12:28

Parag Bhayani

3,280
2
28
52

@Andrus : Put your content inside div and apply overflow hidden, and set div's height ... – Parag Bhayani Jun 18 '16 at 12:32
There are 4 tables. Should divs added inside every table every td and th elements ? – Andrus Jun 18 '16 at 12:42

iyyappan · Answer 2 · 2016-06-18T12:44:31.270

0

.table td, .table th, .table tr {
    height: 72px;
    white-space: normal;
    word-break: break-all !important;
    word-wrap: break-word !important;
}

Please try it.Add the properties and adjust the height.

Or

.table td, .table th, .table tr {
    height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

edited Jun 18 '16 at 12:44

answered Jun 18 '16 at 12:37

iyyappan

767
4
11

I added this to code snippet in answer but problem persists. Browser still uses bigger row height. Have you tried it with this code snippet ? – Andrus Jun 18 '16 at 12:40
I'm not tried.but sure use the both properties white-space: normal; and word-break: break-all !important;word-wrap: break-word !important; – iyyappan Jun 18 '16 at 12:42
I edited code snippet and copied first code exactly from your answer to this. Problem persists. You can press Run code snippet to see it. So your answer doesnt change anything. – Andrus Jun 18 '16 at 12:45
Second code in answer works. However it also disables word wrap. How to enable word wrap so that texts are shown in second line ? Thext should be hidden only if there is no free space to show it. If there is free space, text shoudl appear in second line – Andrus Jun 18 '16 at 12:50
In my experiecne: Big screens will occur correctly.snippet is having small size of container.if you having small screens use the text-overflow and white-space properties. – iyyappan Jun 18 '16 at 12:51
Code run run in mobile phone in portrait orientation. However this issue occurs in desktop chrome also in smaller resolutions when text is wrapped to many lines. Can you be more specific, what exactly to change? Right table Column headers have long captions which should wrapped to two lines using character break. – Andrus Jun 18 '16 at 12:55
IN desktop version: use word-wrap properties and min-height of all the table data's.Mobile version:according to width split the each table with 100% per of width and then use wordwrap. – iyyappan Jun 18 '16 at 12:59
Desktop is used only for developing. Final code is used in mobile phones. I dont understand you comment, can you be more specific, what exactly to change. wordwrap shows all text. I need to hide text in case if it does not fit to fixed row height – Andrus Jun 18 '16 at 13:05
.table th { height: 63px; word-wrap: break-word; } .table td { height: 63px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; word-wrap: break-word; } – iyyappan Jun 18 '16 at 13:18

how to set table row height to fixed value for all tables

2 Answers2