我做了一个表头和列固定的表。但这里我已经指定了我不想要的头/体的宽度。我用引导类col-md-6(50%宽度）将整个表放在一个div中。但是除非我为thead和tbody硬编码样式，否则它是不起作用的。我希望thead和tbody取父div的宽度。但如果没有指定像素或百分比,则会占用屏幕的全宽。这是我的代码
null
$(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>
null
所有我想要的是使表的响应，而不是像静态400px或50%或类似的东西。请帮我一个
有问题了。那是因为我做了头和体块。所以他们和父母分开了。现在我解决了从tbody和thead样式中删除width属性并获得parent的width,然后使用jQuery将相同的width设置为thead和tbody的问题,如下所示：
var parentWidth = $('.fixedParent').width();
$('thead').width(parentWidth);
$('tbody').width(parentWidth);
