I am building a table with Laravel for a web page. I would like to fix columns on the top when scrolling down so that one can still the column names.
Is there a way to do that in Laravel or with Bootstrap?
<div style="height:400px; width:99%; overflow:scroll;">
<!--TABLE-->
<h5>ED Visits Suspected Drug Overdose Data</h5>
<div >
<table >
<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>
CodePudding user response：
You can just add a position: sticky; on the table's thead and it will stick to the top with top: 0;. More on position property here.
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 style="height:400px; width:99%; overflow:scroll;">
<!--TABLE-->
<h5>ED Visits Suspected Drug Overdose Data</h5>
<div >
<table >
<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>