将滚动条指向表格主体

Question

我的表位于以下小提琴https://jsfiddle.net/zj36whmo/

＆＃13;

＆＃13;

    <table class="table table-striped">
        <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
                <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
         <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        </tbody>
        
    </table>

＆＃13;

＆＃13;

＆＃13;

我想给tbody单独一个滚动条。我在stackoverflow上看到很多关于使tbody单独滚动的问题。然而，他们乱七八糟的宽度。我尝试修改选项，但我丢失了卷轴。请帮帮我

Answer 1

根据注释查找对齐进行编辑，请注意已添加许多内容并添加了jQuery代码以进行正确的大小调整。它是suggested question in comments对你案件的改编。

＆＃13;

＆＃13;

var $table = $('table'),
  $bodyCells = $table.find('tbody tr:first').children(),
  colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
  // Get the tbody columns width array
  colWidth = $bodyCells.map(function() {
    return $(this).width();
  }).get();

  // Set the width of thead columns
  $table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
  });
}).resize(); // Trigger resize handler

＆＃13;

table {
  width: 100%;
  border-spacing: 0;
  border: 1px solid gray;
}
table tbody,
table thead {
  display: block;
}
thead tr th {
  height: 30px;
  line-height: 30px;
  /* text-align: left; */
}
table tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}
tbody {
  border-top: 1px solid lightgray;
}
tbody td,
thead th {
  width: 10%;
  border-right: 1px solid lightgray;
}
tbody td:last-child,
thead th:last-child {
  border-right: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <th>Make</th>
      <th>Model</th>
      <th>Color</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford test</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue more</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
  </tbody>

</table>

＆＃13;

＆＃13;

＆＃13;