桌身不如桌子宽

Question

桌身不如桌子宽

我有一个表，其中第一列保持固定。我希望表格可以垂直滚动。我想我已经很接近了，下面的内容几乎达到了我想要的效果，唯一的问题是表行没有列那么宽，我不确定为什么？

.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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

R-b*_*b-n -4

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

我只是删除了：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，9 月前
查看次数：	554 次
最近记录：	3 年，9 月前