我尝试使用 overflow-y：scroll 创建一个包含4列和至少12行的表。该页面完全响应。我知道如果我需要在表格中添加滚动条，我需要在 thead 以及tbody上进行 display：block 。现在我遇到的问题是我不能让我的小腿拥有100％的宽度。我已经尝试过几个小时调整我的代码，似乎无法达成任何解决方案。附上下面的jsfiddle链接
https://jsfiddle.net/kuau4ace/ ` 我只是尝试使用HTML和CSS。
请帮忙！
<table>
答案 0 :(得分：0)
通过将thead和tbody设为显示：阻止，您已经更改了表的属性，这就是为什么tr不要宽度：100％。
试用此代码
$(document).ready(function(){
var body=$('.template_table').clone();
body.addClass('body');
$('.table-wrapper').append("<div class='table-body'></div>");
$('.table-body').append(body);
var curr = [];
$("table.body th").each(function(i) {
var tColumnWidth = $(this).width();
curr.push(tColumnWidth);
});
$("table:first-child th").each(function(i){
$(this).width(curr[i]);
});
$("table.body thead").empty();
$(".table-wrapper>table tbody").empty();
});.template_table{
border:1px solid #000;
width:100%;
padding: 0;
}
.template_table thead{
background:#323333;
height: 30px;
width: 100%;
}
.template_table tbody{
height: 210px;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.template_table th{
border:1px solid #000;
border-left:0;
border-right:0
}
.template_table th select{
background:none;
border:none;
border-right:1px solid #323232;
color:#fff;
padding:5px;
width:80%;
}
.template_table th{
width:330px;
}
.template_table th:first-child{
width:80px;
border:1px solid #000;
}
.template_table th:nth-child(2){
width:220px;
border:1px solid #000;
}
.template_table td:first-child{
width:80px;
}
.template_table td:nth-child(2){
width:220px;
}
.template_table td{
width:220px;
color: #c3bfbf;
border-bottom:1px solid #000;
}
.template_table tbody tr:hover td{
background:#676767;
color:#fff;
}
.template_table th{
border:1px solid #000;
border-left:0;
border-right:0;
}
.template_table th select{
background:none;
border:none;
border-right:1px solid #323232;
color:#fff;
padding:5px;
width:80%;
}
.template_table th:first-child{
width:80px;
border:1px solid #000;
}
.template_table th:nth-child(2){
width:220px;
border:1px solid #000;
}
.template_table td:first-child{
width:17%;
}
.template_table td:nth-child(2){
width:37%;
}
.template_table td:nth-child(3) {
}
.template_table td{
color:#807c7c;
border-bottom:1px solid #000;
}
.template_table tbody tr:hover td{
background:#676767;
color:#fff;
}
tbody tr{
cursor:pointer;
}
.table-wrapper {
width: calc(100% - 20px);
}
.table-body {
height: 200px;
overflow-x: hidden;
overflow-y: auto;
width: calc(100% + 15px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="table-wrapper">
<table class="col-xs-12 template_table">
<thead>
<tr>
<th></th>
<th>
<select>
<option>Page Name </option>
</select>
</th>
<th>
<select>
<option>Template</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Video Source 1 </td>
<td>Video Clip</td>
</tr>
<tr>
<td></td>
<td>ManningL3 </td>
<td>Player L3</td>
</tr>
<tr>
<td></td>
<td>Boyriven </td>
<td>Talent ID</td>
</tr>
<tr>
<td></td>
<td>Halftime Stats </td>
<td>Full Screen Stats</td>
</tr>
<tr>
<td></td>
<td>Locator </td>
<td>Full Screen Locator</td>
</tr>
<tr>
<td></td>
<td>Locator </td>
<td>Full Screen Locator</td>
</tr>
<tr>
<td></td>
<td>Locator </td>
<td>Full Screen Locator</td>
</tr>
<tr>
<td></td>
<td>Time </td>
<td>Bug</td>
</tr>
<tr>
<td></td>
<td>Singular Info </td>
<td>Topic L3</td>
</tr>
<tr>
<td></td>
<td>Los Angeles</td>
<td>Locator</td>
</tr>
<tr>
<td></td>
<td>Lewandowski </td>
<td>Player L3</td>
</tr>
<tr>
<td></td>
<td>Lewandowski </td>
<td>Player L3</td>
</tr>
</tbody>
</table>
</div>