问题描述
我用固定的标题和列制作了一个表。 但是在这里，我指定了我不想要的主题/主体的宽度。 我把整个表放在带有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％之类的。 请帮我一个
1楼
遇到问题了。 那是因为我把thead和tbody块了。 因此他们与父母分离了。 现在，我解决了从tbody和thead样式中删除width属性并获取父级宽度的问题，然后使用jQuery这样将thead和tbody的宽度设置为相同：
var parentWidth = $('.fixedParent').width();
$('thead').width(parentWidth);
$('tbody').width(parentWidth);