html - 可滚动表格，使用 CSS、Joomla 锁定第一列

Question

我知道有一些扩展可以实现这一点，但我想这样做(如果可能的话)。我尝试了几种使用“child”和 nowrap 命令的方法，但无法正常工作。我做了 table ，一切都很好。但是我希望它在移动设备上更先进，并将第一列锁定到位 -> 其他所有内容都应该向左滚动。如何仅使用 HTML 和 CSS(无 Javascript)来完成。我有带有 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>

Answer 1

这通常称为“卡住”或“锁定”。对 SO 的快速搜索出现了 how do I create an HTML table with fixed/frozen left column and scrollable body?这应该可以帮助你。关键是使第一列固定宽度并将其绝对定位。首先尝试该帖子中引用的 .headcol 类，看看你得到了什么。您可以删除其中的许多样式以满足您的需要。