向下滾動時頂部帶有固定列的引導表

我正在用 Laravel 為網頁構建一個表格。我想在向下滾動時修復頂部的列，以便仍然可以使用列名。

有沒有辦法在 Laravel 或 Bootstrap 中做到這一點？

<div class="card-body" style="height:400px; width:99%; overflow:scroll;">
    <!--TABLE-->
    <h5>ED Visits Suspected Drug Overdose Data</h5>
    <div class="table">
        <table class="table mb-0">
            <thead>
                <tr style="vertical-align:center;">
                    <th scope="col">Ohio County</th>
                    <th scope="col">2016 Q3 </th>
                    <th scope="col">2016 Q4 </th>
                    <th scope="col">2017 Q1 </th>
                    <th scope="col">2017 Q2 </th>
                    <th scope="col">2017 Q3 </th>
                    <th scope="col">2017 Q4 </th>
                    <th scope="col">2018 Q1 </th>
                    <th scope="col">2018 Q2 </th>
                    <th scope="col">2018 Q3 </th>
                    <th scope="col">2018 Q4 </th>
                    <th scope="col">2019 Q1 </th>
                    <th scope="col">2019 Q2 </th>
                    <th scope="col">2019 Q3 </th>
                    <th scope="col">2019 Q4 </th>
                    <th scope="col">2020 Q1 </th>
                </tr>
            </thead>
            <!--data and codes-->
        </table>
    </div>
</div>

uj5u.com熱心網友回復：

您可以position: sticky;在桌子上添加一個thead，它會粘在頂部top: 0;。更多關于這里position的財產。

thead {
  position: sticky;
  top: 0;
  background-color: #fff !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="card-body" style="height:400px; width:99%; overflow:scroll;">
  <!--TABLE-->
  <h5>ED Visits Suspected Drug Overdose Data</h5>
  <div class="table">
    <table class="table mb-0">
      <thead>
        <tr style="vertical-align:center;">
          <th scope="col">Ohio County</th>
          <th scope="col">2016 Q3 </th>
          <th scope="col">2016 Q4 </th>
          <th scope="col">2017 Q1 </th>
          <th scope="col">2017 Q2 </th>
          <th scope="col">2017 Q3 </th>
          <th scope="col">2017 Q4 </th>
          <th scope="col">2018 Q1 </th>
          <th scope="col">2018 Q2 </th>
          <th scope="col">2018 Q3 </th>
          <th scope="col">2018 Q4 </th>
          <th scope="col">2019 Q1 </th>
          <th scope="col">2019 Q2 </th>
          <th scope="col">2019 Q3 </th>
          <th scope="col">2019 Q4 </th>
          <th scope="col">2020 Q1 </th>
        </tr>
        <tbody>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
        </tbody>
      </thead>
      <!--data and codes-->
    </table>
  </div>
</div>

標籤：

上一篇：我可以在文本元素中插入一些“內容”嗎？

下一篇：HTMLCSSANDJS幫助創建回應式漢堡選單