在表格中，我需要将一列“固定”到位，并使其他列水平滚动。下面是一个可视化示例：我尝试使用溢出滚动，但它似乎什么也不做：.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>
1 回答
神不在的星期二
TA贡献1963条经验 获得超6个赞
我修改了 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>
添加回答
举报
0/150
提交
取消