桌身不如桌子宽答案

【问题标题】：table body not as wide as table桌身不如桌子宽
【发布时间】：2022-11-17 05:17:50
【问题描述】：

我有一张表，其中第一列保持固定。我希望表格可以垂直滚动。我想我已经接近了，下面几乎可以满足我的要求，唯一的问题是表格行不如列宽，我不确定为什么？

.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background-color: #ad6c80;
  color: #373737;
}

table {
  height: 300px;
}

tbody {
  overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
    <table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
      <thead>
        <tr>
          <th scope='col' data-sortable="true">Column 1</th>
          <th scope='col'>Column 2</th>
          <th scope='col'>Column 3</th>
          <th scope='col'>Column 4</th>
          <th scope='col'>Column 5</th>
          <th scope='col'>Column 6</th>
          <th scope='col'>Column 7</th>
          <th scope='col'>Column 8</th>
          <th scope='col'>Column 9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Conf</td>
          <td>even 20 trail A</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail B</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail A</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail B</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail A</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail B</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail A</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail B</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail A</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail B</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail A</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail B</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js">
  </script>
  <script>
    $(document).ready(function() {
      $('table').bootstrapTable();
    });
  </script>
</body>

</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

https://jsfiddle.net/kaxt5wpb/4/

我只是删除了：

tbody{
   overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
 }

【讨论】：

他要的是固定在上面的桌头。您的解决方案删除了该功能。
不，它没有。检查小提琴。它水平滚动，而不是垂直滚动。我建议对列的宽度使用 colspan 或其他东西。
请你重新检查小提琴，表头（列部分）不固定。