如何使一个表行与另一个表的行具有相同的高度？

时间：2015-08-11 13:38:46

标签： css

我有两张桌子。我做了一个小提琴，你可以看到它：

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>

我现在希望右侧的行自动获得左侧表格的大小。这可能吗？

3 个答案:

答案 0 :(得分：1)

这是动态高度，如果一个表行高度增加，第二个表各自的行高也会随着高度的增加而增加

将ids分配给两个表并添加以下脚本

$('#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>

答案 1 :(得分：0)

添加

height: 300px;

或您需要的任何高度

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

行更高的原因是因为：

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

您正在添加换行符。另外，他们是两个不同的表。除非你在css中这样做，否则你不能指望它们表现完全相同。或者在第二个表中使用相同的

答案 2 :(得分：0)

您可以将两个表格中单元格的高度固定为相同的值，以便它们排成一行;然而，这显然意味着细胞并不总是适合内容。

相反，您可以将表链接到一个表中，然后在一些空白单元格上设置visibility:hidden;以提供相同的效果。仍然可能不是你想要的，但总是一个选择：

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

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

假设您有一个包含3列的表和另一个包含1列的表，您可以将它们合并到具有隐藏列的单个表中以创建相同的外观。下面是一个例子，第4列（空列）作为列之间的间隙;可以通过改变第4列中标题和单元格的宽度来调整间隙的大小。

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

相关问题
最新问题