CODEWITHSUNDEEP
css
peace_love
peace_love

Reputation: 6471

How can I make one table row the same height as the row of another table?

I have two tables. I made a fiddle so you can see it:

https://jsfiddle.net/nLdxcedv/

<div id="wrapper">
    <div id="content" style="overflow-x:scroll">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>

                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>                
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                    <th>Lorem ipsum</th>
                </tr>
            </thead>
            <tbody> 
<tr> <td>Lorem ipsum</td><td>Lorem ipsum </td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum </td><td> Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td><td>Lorem ipsum</td></tr> <tr> <td>Lorem ipsum</td><td>Lorem ipsum </td><td>Lorem ipsum</td><td>Lorem ipsum</td><td><td>Lorem ipsum</td><td>Lorem ipsum</td><td> </td><td> Lorem ipsum</td><td>Lorem ipsum</td><td></td><td></td><td></td></tr>             
            </tbody>
        </table>
     </div>
     <div id="sidebar">
        <table class="table table-striped table-bordered">
             <thead>
                 <tr>
                    <th>Lorem ipsum</th>
                </tr>
            </thread>
           <tbody>      
            <tr><th>Lorem ipsum<tr><th>Lorem ipsum  </tbody>
      </table>
    </div>
<div id="cleared"></div>

I wish now that the rows on the right side will automatically get the size of the table on the left side. Is this possible?

Upvotes: 0

Views: 4916

Answers (3)

Shehary
Shehary

Reputation: 9992

Here is with dynamic height, if one table row height increase, 2nd table respective row height will also increase with same height

Assign ids to both table and add following script

$('#table1 tr').each(function(i,el) {
    var hgt = $(this).height();
    $('#table2 tr').eq(i).height(hgt);
});
body{
  padding:40px;
}
table{
  font-size:13px;white-space: nowrap;
}
.container{
  padding:0px
}
#content {
  float: left;
  width: 100%;
}
#sidebar {
  float: right;
  width: 420px;
  margin-right: -420px;
}  
#wrapper {
  margin-right: 240px;
}
#sidebar {
  float: right;
  width: 240px;
  margin-right: -240px;
}  
#cleared {
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div id="wrapper">
	<div id="content" style="overflow-x:scroll">
		<table class="table table-striped table-bordered" id="table1">
		    <thead>
				<tr>
				
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>				
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
					<th>Lorem ipsum</th>
				</tr>
			</thead>
			<tbody>
			
				<tr> 
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum  <br> Lorem ipsum </td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
				</tr>
				<tr>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
					<td>Lorem ipsum</td>
				</tr>
			  </tbody>
	        </table>
	    </div>
	    
	    <div id="sidebar">
		         <table class="table table-striped table-bordered" id="table2">
		         	<thead>
		         		<tr>
		         			<th>Lorem ipsum</th>
		         		</tr>
		         	</thread>
	    		<tbody>   			
				<tr>
                    <td>Lorem ipsum</td>
                </tr>
                <tr>
                    <td>Lorem ipsum</td>
                       
                  </tbody>
		         </table>
	    </div>
<div id="cleared"></div>

Upvotes: 4

Chris Dobson
Chris Dobson

Reputation: 150

You can fix the height of the cells in both tables to the same value so that they will line up; however this obviously means that the cells won't always fit the contents.

Instead, you can link the tables into a single table, then set visibility:hidden; on some blank cells to provide the same effect. Still perhaps not what you want, but always an option:

tr th:nth-of-type(dummyColumn) {
    visibility:hidden;
}

tr td:nth-of-type(dummyColumn) {
    visibility:hidden;
}

Say you have one table with 3 columns and another with 1 column, you can merge them into a single table with a hidden column to create the same appearance. Below is an example, with the 4th column (an empty column) as the gap between the columns; the size of the gap can be adjusted by changing the width of the header and cells in the 4th column.

JSFiddle: https://jsfiddle.net/SolveItSimply/o6frhmLx/4/

Upvotes: 0

carinlynchin
carinlynchin

Reputation: 389

add 

height: 300px;

or whatever height you need

js: https://jsfiddle.net/nLdxcedv/1/

the reason that row is taller is because of this:

<td>Lorem ipsum
    <br>Lorem ipsum<br>
</td>

you are adding line breaks. Plus they are two different tables. You can't expect them to behave exactly the same unless you do it in css. Or have the same
in the second table

Upvotes: 0

Related Questions