我知道有一些扩展可以实现此目的，但是我想这样做（如果可能）。我已经尝试过使用“ child”和nowrap命令的几种方法，但无法使其正常工作。我已经摆好桌子了，一切都很好。但是我希望它在移动设备上更加先进，并将第一列锁定在适当位置->其他所有内容都应向左滚动。仅使用HTML和CSS怎么做。我有带有CSS代码的theme.css，并将为带有表本身的页面制作“自定义HTML”代码模块。
这里也有一些解决方案，但是通过使用建议的方法，我的表坏了并且不能正确显示。
.table-container{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 900px){
.table-container {
overflow: visible;
}
}
.table-container body{
padding: 1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #222;
}
.table-container table{
border-collapse: collapse;
border-spacing: 0;
background-color: white;
width: 100%;
border: 0px solid #620376;
}
.table-container th, td{
padding: 0.25em 0.75em;
text-align: left;
}
.table-container th{
background-color: #000000;
white-space: nowrap;
color: white;
}
.table-container td{
border-top: 1px solid #000000;
}
tr:nth-child(even) {
background-color: #929292;
}<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th> </th>
<th> </th>
<th><center>Parameter S</center></th>
<th><center>Parameter S</center></th>
<th><center>Parameter S</center></th>
<th><center>Parameter S</center></th>
</tr>
</thead>
<tbody>
<tr>
<td>Parameter 1</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
<tr>
<td>Parameter 2</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
<tr>
<td>Parameter 3</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
<tr>
<td>Parameter 3</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
<tr>
<td>Parameter 4</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
<tr>
<td>Parameter 5</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
<tr>
<td>Parameter 6</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
<tr>
<td>Parameter 7</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
<tr>
<td>Parameter 8</td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
<td><center>m2</center></td>
</tr>
</tbody>
</table>
</div>我可能只建议两个锯齿状的表。
在您的第一个表格中，您只是将其设置为永不移动。
您使第二个表可滚动。
<table class="New Table for header only">
<th colspan="# of columns">Table</th>
<td>Ranger Rover</td>
<td>Mercedes</td>
<td>toyota</td>
</table>
然后，只需合并其他表中的数据即可，而无需附加标题。
这应该工作对吗？除非我误解了这个问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句