可滚动表格，用 CSS 锁定第一列，Joomla答案

【问题标题】：Scrollable table, locked first column with CSS, Joomla可滚动表格，用 CSS 锁定第一列，Joomla
【发布时间】：2017-01-12 15:59:51
【问题描述】：

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

【问题讨论】：

没有 javascript 为什么要标记它？

标签： html css joomla scrollable

【解决方案1】：

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

【讨论】：