我正在创建一个包含事件和小时的时间表,因此需要在表格水平滚动时固定第一列,以帮助用户更轻松地查看事件的时间。我正在使用Bootstrap 4。表格截图: http://prntscr.com/japkbc.
最好的问候
我正在创建一个包含事件和小时的时间表,因此需要在表格水平滚动时固定第一列,以帮助用户更轻松地查看事件的时间。我正在使用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>