CSS当使用溢出时，差距仍然存在

Question

我创建了一个HTML表格，当我使用溢出来确保它不超过某个高度时，下面的div放置的方式使文本仍然适合。

我需要将div直接放在滚动表的下方。

我正在使用overflow: hidden但是我仍然可以选择文字，但我无法看到它。

＆＃13;

＆＃13;

$('document').ready(function() {
	var $table = $('#ingsNeededTable'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

	$(window).resize(function() {
		colWidth = $bodyCells.map(function() {
			return $(this).width();
		}).get();
		
		$table.find('thead tr').children().each(function(i, v) {
			$(v).width(colWidth[i] + 1);
		});    
	}).resize();
	
	var loop = setInterval(function() {
		$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
		$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
	}, 1);
});

＆＃13;

#ingsNeededTableHolder {
	height: 45%;
}
#ingsNeededTitle, #ingsRecentTitle {
	text-align: center;
}
#ingsNeededTable {
	border-collapse: collapse;
	width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
	border-bottom: 1px solid black;
}
#ingsNeededTable thead {
	display: block;
	width: 100%;
}
#ingsNeededTable tbody {
	display: block;
	height: 40%;
	overflow-y: hidden;
	width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
	width: 40%;
}
.ingsNeededTableNeeded {
	width: 10%
}
#ingsNeededTable tr:nth-child(even) {
	background-color: #eaf2f1
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
  <table id='ingsNeededTable'>
    <thead>
      <tr>
        <th class='ingsNeededTableIng'>Ingredient</th>
        <th class='ingsNeededTableNeeded'>Needed (Kg)</th>
        <th class='ingsNeededTableProd'>Product</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <h2>This Should Be Below The Scrolling Table</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

该表格在我的网页上正确对齐，但由于某种原因它不在代码段上。

Answer 1

将max-height设置为#ingsNeededTableHolder

#ingsNeededTableHolder {
    height: 45%;
    max-height: 150px;
    overflow: hidden;
}

＆＃13;

＆＃13;

$('document').ready(function() {
	var $table = $('#ingsNeededTable'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

	$(window).resize(function() {
		colWidth = $bodyCells.map(function() {
			return $(this).width();
		}).get();
		
		$table.find('thead tr').children().each(function(i, v) {
			$(v).width(colWidth[i] + 1);
		});    
	}).resize();
	
	var loop = setInterval(function() {
		$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
		$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
	}, 1);
});

＆＃13;

#ingsNeededTableHolder {
    height: 45%;
    max-height: 150px;
    overflow: hidden;
}
#ingsNeededTitle, #ingsRecentTitle {
	text-align: center;
}
#ingsNeededTable {
	border-collapse: collapse;
	width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
	border-bottom: 1px solid black;
}
#ingsNeededTable thead {
	display: block;
	width: 100%;
}
#ingsNeededTable tbody {
	display: block;
	height: 40%;
	overflow-y: hidden;
	width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
	width: 40%;
}
.ingsNeededTableNeeded {
	width: 10%
}
#ingsNeededTable tr:nth-child(even) {
	background-color: #eaf2f1
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
  <table id='ingsNeededTable'>
    <thead>
      <tr>
        <th class='ingsNeededTableIng'>Ingredient</th>
        <th class='ingsNeededTableNeeded'>Needed (Kg)</th>
        <th class='ingsNeededTableProd'>Product</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <h2>This Should Be Below The Scrolling Table</h2>
</div>

＆＃13;

＆＃13;

＆＃13;