如何在表格中修复tbody的高度
[英]How to fix height of tbody in table
问题描述
I want ot make this Red Box to convert into a fix scrollable height which is present in tbody . 
我想让这个Red Box转换成一个固定的可滚动高度，它存在于tbody 。 I searched a lot and tried multiple ways but I'm still stuck there. 我搜索了很多并尝试了多种方法，但我仍然坚持到那里。 The screen shot is attached as Red Box and code is given below. 屏幕截图附在Red Box ，代码如下。 Please help me how can I fix this and give me an example of this to sort out my problem, Thanks a lot ! 请帮助我如何解决这个问题并给我一个例子来解决我的问题，非常感谢！
One more thing I would like to ask, how can I remove the horizontal line at the bottom of the page. 还有一件事我想问一下，如何删除页面底部的水平线。 the screen shot is given below named as Horizontal Line . 屏幕截图在下面给出，命名为Horizontal Line 。
<!doctype html> <html> <head> <html> <head> <meta charset="utf-8"> <title>ISSUE</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="background-color: #e3e3e3;"> <div class="row"> <div class="container" style="background-color: #efefef;box-shadow: 2px 2px 1px 1px ;"> <div class="col-md-11" style="background-color: brown"> <center> <h2 style="line-height: 60 px;color: white;">ISSUE</h2> </center> </div> <div class="col-md-1"> <a href="logout.php">ABCDEF</a> </div> <div class="col-md-2" style="background-color: pink; box-shadow: 0px 1px 0px 1px"> one<br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three </div> <div class="col-md-9"> <div class="col-md-6"> <br> <label>Enter Country Name</label> <input type="text" name="country" id="country" style="width:200px; margin-right: 0;"/> <div id="countryList"></div> </div> <div class="col-md-6"> <table class="table"> <center> <h2>BALANCE THIS</h2> </center> <tr> <td> <label>Inovice No. </label> </td> <td> <label>User Name</label> </td> </tr> </table> <table class="table table-bordered table-hover"> <thead> <tr> <th>AAAA</th> <th>BBBB</th> <th> CCCC </th> <th>DDDD</th> <th>EEEE</th> </tr> </thead> <tbody class="details"> <tr> <td> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> A<br> </td> </tr> </tbody> <tfoot> <tr> <td> ZZZ : <input type="text" name="ZZZ" class="form-control subtotal"> XXX : <input type="text" name="XXX" class="form-control pay"> YYY : <input type="text" name="YYY" class="form-control payback"> </td> </tr> </tfoot> </table> <input type="submit" value="Confirm" class="btn btn-primary"> </div> </div> </div> </div> </body> </html>
And here is a screenshot of the above snippet: 以下是上述代码段的屏幕截图：
2 个解决方案
解决方案1
2 已采纳 2017-10-01 04:59:45
PROBLEM ONE 问题一
There are number of solutions to sort out but i found this one is more useful mehtod. 有很多解决方案可以解决，但我发现这个更有用mehtod。 I hope this will helpful to you. 我希望这对你有所帮助。
<!doctype html>
<html>
<head>
<html>
<head>
<meta charset="utf-8">
<title>ISSUE</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.table-fixed thead {
width: 100%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed thead> tr> th {
float: left;
border-bottom-width: 0;
}
</style>
</head>
<body style="background-color: #e3e3e3;">
<div class="row">
<div class="container" style="background-color: #efefef;box-shadow: 2px 2px 1px 1px ;">
<div class="col-md-11" style="background-color: brown">
<center>
<h2 style="line-height: 60 px;color: white;">ISSUE</h2>
</center>
</div>
<div class="col-md-1">
<a href="logout.php">ABCDEF</a>
</div>
<div class="col-md-2" style="background-color: pink; box-shadow: 0px 1px 0px 1px">
one<br> two
<br> three
<br> four
<br> one
<br> two
<br> three
<br> four
<br> one
<br> two
<br> three
<br> four
<br> one
<br> two
<br> three
<br> four
<br> one
<br> two
<br> three
<br> four
<br> one
<br> two
<br> three
<br> four
<br> one
<br> two
<br> three
</div>
<div class="col-md-9">
<div class="col-md-6">
<br>
<label>Enter Country Name</label>
<input type="text" name="country" id="country" style="width:200px; margin-right: 0;"/>
<div id="countryList"></div>
</div>
<div class="col-md-6">
<table class="table">
<center>
<h2>BALANCE THIS</h2>
</center>
</table>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">AAAA</th>
<th class="col-xs-2">BBBB</th>
<th class="col-xs-2">CCCC</th>
<th class="col-xs-2">DDDD</th>
<th class="col-xs-4">EEEE</th>
</tr>
</thead>
<tbody class="details">
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
<tr>
<td class="col-xs-2">A</td>
</tr>
<tr>
<td class="col-xs-2">B</td>
</tr>
<tr>
<td class="col-xs-2">C</td>
</tr>
<tr>
<td class="col-xs-2">D</td>
</tr>
<tr>
<td class="col-xs-4">E</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
ZZZ : <input type="text" name="ZZZ" class="form-control subtotal"> XXX : <input type="text" name="XXX" class="form-control pay"> YYY : <input type="text" name="YYY" class="form-control payback">
</td>
</tr>
</tfoot>
</table>
<input type="submit" value="Confirm" class="btn btn-primary">
</div>
</div>
</div>
</div>
</body>
</html>
解决方案2
0 2017-10-01 01:03:29
Problem 1 Solved: 问题1解决了：
Container width to full stretch. 容器宽度到完全拉伸。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <body style="background-color: #e3e3e3;"> <div class="container" style="background-color: #efefef;box-shadow: 2px 2px 1px 1px ;"> <div class="row"> <div class="col-md-11" style="background-color: brown"> <center> <h2 style="line-height: 60 px;color: white;">ISSUE</h2> </center> </div> <div class="col-md-1"> <a href="logout.php">ABCDEF</a> </div> <div class="col-md-2" style="background-color: pink; box-shadow: 0px 1px 0px 1px"> one<br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three <br> four <br> one <br> two <br> three </div> <div class="col-md-9"> <div class="col-md-6"> <br> <label>Enter Country Name</label> <input type="text" name="country" id="country" style="width:200px; margin-right: 0;" /> <div id="countryList"></div> </div> <div class="col-md-6"> <table class="table"> <center> <h2>BALANCE THIS</h2> </center> <tr> <td> <label>Inovice No. </label> </td> <td> <label>User Name</label> </td> </tr> </table> <table class="table table-bordered table-hover"> <thead> <tr> <th>AAAA</th> <th>BBBB</th> <th> CCCC </th> <th>DDDD</th> <th>EEEE</th> </tr> </thead> <tbody class="details"> <tr> <td> A<br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> A <br> </td> </tr> </tbody> <tfoot> <tr> <td> ZZZ : <input type="text" name="ZZZ" class="form-control subtotal"> XXX : <input type="text" name="XXX" class="form-control pay"> YYY : <input type="text" name="YYY" class="form-control payback"> </td> </tr> </tfoot> </table> <input type="submit" value="Confirm" class="btn btn-primary"> </div> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在HTML表格中设置Tbody的宽度和高度 - How to set width and height of Tbody in HTML table
如何：100％高度表仅滚动tbody - How To: 100% Height Table only Scroll tbody
如何用不平衡的球体和身体修复桌子 - How to fix table with unbalanced thead and tbody
如何修复桌面高度？ - How to fix the table height?
尝试最小化工作台高度（TABLE，TBODY和偏移） - Trying to minimize the table height (TABLE, TBODY and offset)
如何将td高度固定为桌子高度？ - How to fix td height as table height?
如何调整容器内的表格高度和宽度并添加水平和垂直滚动条以避免溢出？ - How to adjust table height and width within container and add horizontal and vertical scroll bars in <tbody> to avoid overflow?
如何使用溢出滚动设置 tbody 高度 - How to set tbody height with overflow scroll
如何在表的多个tbody中使用jquery删除选定的tbody - how can remove selected tbody with jquery in multiple tbody of table
当主体包含很多元素时，jQuery获取实际的表高度 - jquery get real table height when tbody has lot of elements
相关标签