水平滚动表格中的某些列？
在表格中，我需要将一列“固定”到位，并使其他列水平滚动。下面是一个可视化示例：
我尝试使用溢出滚动，但它似乎什么也不做：
.horizontal-scrolling {
display: flex;
width: 500px;
overflow: scroll;
}
.horizontal-scrolling th {
width: 250px;
}
<table>
<thead>
<tr>
<th>First</th>
<span class="horizontal-scrolling">
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</span>
</tr>
<thead>
</table>
幕布斯7119047浏览 73回答 1
1回答
-
神不在的星期二
我修改了 w3schools 标准表，将一列粘贴到左侧的位置。这种样式可以通过javascript应用于表格的特定列table { font-family: arial, sans-serif; border-collapse: collapse; width: 1000px;}td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}tr:nth-child(even) { background-color: #dddddd;}tr th:nth-of-type(1),/*this is where the table column gets its*/tr td:nth-of-type(1){/*styling to stick to the left and stay ontop of the rest*/position:sticky;left: 0;z-index: 1;background: white;width: 150px}div {width: 600px;overflow: auto;}<body><h2>HTML Table</h2><div><table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr></table></div></body>
随时随地看视频慕课网APP
相关分类
JavaScript