gpt4 book ai didi

javascript - Bootstrap4 响应表 - 固定第一列

转载 作者:太空狗 更新时间:2023-10-29 13:38:47 25 4
gpt4 key购买 nike

我正在创建一个包含事件和时间的时间表,因此我需要在表格水平滚动时修复第一列。这将帮助用户更轻松地查看事件时间。我正在使用 Bootstrap 4。表格的屏幕截图:http://prntscr.com/japkbc .

最好的问候

最佳答案

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th
{
background-color:black;
color:white;
}
th:first-child, td:first-child
{
position:sticky;
left:0px;

}
td:first-child
{
background-color:grey;
}
<table>
<tr>
<th>TIME</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

关于javascript - Bootstrap4 响应表 - 固定第一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50057585/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com