Html 无法在表中固定表标题和搜索框_Html_Css

Html 无法在表中固定表标题和搜索框

html css

Html 无法在表中固定表标题和搜索框,html,css,Html,Css,我试图使我的表标题行和搜索过滤器输入位于将表格标题设置为固定（不可滚动）。但我不能这样做。我尝试了很多方法，比如把放在ad位置：fixed。但都不管用。谁能帮忙吗提前谢谢。下面是我的html代码 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg

我试图使我的表标题行和搜索过滤器输入位于将表格标题设置为固定（不可滚动）。但我不能这样做。我尝试了很多方法，比如把

放在ad位置：fixed

。但都不管用。谁能帮忙吗

提前谢谢。下面是我的html代码

<link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="table-wrapper-scroll-y my-custom-scrollbar"
     style="margin: 5%; border-radius: 10px; border-style: groove;">

  <input id="searchField"
         type="text" [(ngModel)]="term"
         class="form-group " placeholder="Search" />

  <table class="table table-bordered table-striped mb-0">
    <thead>
    <tr>
      <th scope="col">Col1</th>
      <th scope="col">Col2</th>
      <th scope="col">Col3</th>
      <th scope="col">Col4</th>
      <th scope="col">Col5</th>
      <th scope="col">Col6</th>
      <th scope="col">Col7</th>
      <th scope="col">Col8</th>
      <th scope="col">Col9</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
        <td>Col1</td>
      </tr>
    <tr>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
      <td>Col1</td>
    </tr>
    </tbody>
  </table>
</div>

我的解决方案

可能是

位置：粘性

是在滚动

表时，您需要使用它使搜索框保持在顶部

.my自定义滚动条{
位置：相对位置；
高度：400px；
溢出：自动；
溢出-x：自动；
}
.table-wrapper-scroll-y{
显示：块；
}
#搜索区{
左缘：5%；
保证金权利：5%；
边缘底部：20px；
边缘顶部：20px；
宽度：30%；
高度：30px；
边框颜色：#6b645c；
边界半径：5px；
左边框颜色：#6b645c；
边框底部样式：实心；
位置：粘性；
排名：0；
}
.桌上固定了桌子，
.工作台固定式车身，
.表固定tr，
.表格固定运输署，
.表格固定{
显示：块；
}
.表THAD tr th{
位置：粘性；
顶部：30px；
}

可乐
可乐
可乐
可乐
可乐
可乐6
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐
可乐

   .my-custom-scrollbar {
    position: relative;
    height: 400px;
    overflow: auto;
    overflow-x: auto;
  }

  .table-wrapper-scroll-y {
    display: block;
  }

  #searchField {

    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 30%;
    height: 30px;
    border-color: #6b645c;
    border-radius: 5px;
    border-left-color: #6b645c;
    border-bottom-style: solid;
  }

  .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
  }