我制作了一个带有固定标题和列的表。但是在这里，我指定了我不想要的主题/主体的宽度。我将整个表放在带有bootstrap类col-md-6（50％宽度）的div中，但是除非我为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％之类的东西。请帮我一个
答案 0 :(得分：0)
解决了问题。那是因为我把thead和tbody块了。因此他们与父母分离了。现在，我解决了从tbody和thead样式中删除width属性并获取父对象的宽度，然后使用jQuery这样将thead和tbody设置为相同宽度的问题：
var parentWidth = $('.fixedParent').width();
$('thead').width(parentWidth);
$('tbody').width(parentWidth);