我制作了一个带有固定标题和列的表格。但是在这里我已经指定了我不想要的 thead/tbody 的宽度。我把整个表放在一个带有 Bootstrap 类 col-md-6(50% 宽度)的 div 中。但是除非我为 thead 和 tbody 硬编码样式，否则它不起作用。我希望 thead 和 tbody 的宽度为父 div。但是如果没有以像素或百分比指定，它会以某种方式占用屏幕的整个宽度。这是我的代码
$(document).ready(function () {
$('tbody').scroll(function (e) {
$('tbody td:nth-child(1)').css("z-index", "1");
$('tbody td:nth-child(2)').css("z-index", "1");
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
$('thead th:nth-child(2)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(2)').css("left", $("tbody").scrollLeft());
});
}); /*setting for fixed columns*/
table.trkFixTable tr td:nth-child(1), table.trkFixTable tr th:nth-child(1) {
min-width: 150px;
}
table.trkFixTable tr td:nth-child(2), table.trkFixTable tr th:nth-child(2) {
min-width: 150px;
}
table.trkFixTable thead th:nth-child(1), table.trkFixTable thead th:nth-child(2) {
height: 80px;
position: relative;
z-index: 2;
}
table.trkFixTable tbody tr td:nth-child(1), table.trkFixTable tbody tr td:nth-child(2) {
position: relative;
height: 60px;
}
/*removing hover effect*/
table.trkFixTable td:hover::after,
table.trkFixTable th:hover::after {
all: unset;
}
/*common styles*/
table.trkFixTable {
position: relative;
overflow: hidden;
/*width:100%;*/
border-collapse: collapse;
}
table.trkFixTable thead {
position: relative;
display: block;
width: 500px;
overflow: visible;
}
table.trkFixTable thead th {
min-width: 80px;
height: 32px;
background-color: #6afce2;
text-align: center;
border:1px solid black;
}
table.trkFixTable tbody {
position: relative;
display: block;
width: 500px;
overflow: scroll;
height: 200px;
}
table.trkFixTable tbody td {
min-width: 80px;
border: 1px solid #222;
background-color: #c1fff4;
text-align: center;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<div class="col-md-6">
<table class="trkFixTable">
<thead>
<tr>
<th>First</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>First</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>First</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>First</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
<tr>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
<td>Robin</td>
</tr>
</tbody>
</table>
</div>
我想要的只是让表格具有响应性，而不是像静态的 400px 或 50% 或类似的东西。请帮我一些
最佳答案
找到问题了。这是因为我制作了 thead 和 tbody block 。所以他们与 parent 分开了。现在我解决了从 tbody 和 thead 样式中删除宽度属性并获取父级宽度的问题，然后使用 jQuery 为 thead 和 tbody 设置相同的宽度，如下所示:
var parentWidth = $('.fixedParent').width();
$('thead').width(parentWidth);
$('tbody').width(parentWidth);
关于javascript - 固定列表的固定标题根据宽度不响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54663876/