具有固定列表的固定標題不響應寬度

Question

我用固定的標題和列制作了一個表。 但是在這里，我指定了我不想要的主題/主體的寬度。 我把整個表放在帶有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％之類的。 請幫我一個

Answer 1

遇到問題了。 那是因為我把thead和tbody塊了。 因此他們與父母分離了。 現在，我解決了從tbody和thead樣式中刪除width屬性並獲取父級寬度的問題，然后使用jQuery這樣將thead和tbody的寬度設置為相同：

var parentWidth = $('.fixedParent').width();
        $('thead').width(parentWidth);
        $('tbody').width(parentWidth);