Andrus Andrus - 5 months ago 44
jQuery Question

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

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

I tried anwer from

set table row height

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>




Answer

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;
}
Comments