gpt4 book ai didi

html - 如何固定表中tbody的高度

转载 作者:可可西里 更新时间:2023-11-01 13:21:33 33 4
gpt4 key购买 nike

我想让这个 Red Box 转换为 tbody 中存在的固定可滚动高度。我搜索了很多并尝试了多种方法,但我仍然被困在那里。屏幕截图作为 Red Box 附上,代码如下。请帮助我如何解决这个问题,并给我一个例子来解决我的问题,非常感谢!

Red Box

我还想请教一个问题,如何去掉页面底部的横线。下面给出的屏幕截图名为 Horizo​​ntal 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>

这是上面片段的截图:

enter image description here

最佳答案

问题一

有许多解决方案可供选择,但我发现这个方法更有用。我希望这对你有所帮助。

Vertical Scrollable

<!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>

关于html - 如何固定表中tbody的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46508235/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com