可滚动 table，用 CSS 冻结第一列，Joomla

Question

我知道有一些扩展可以实现这一点，但我想这样做（如果可能的话）。我已经用 "child" 和 nowrap 命令尝试了几种方法，但无法使其工作。我做了table，一切都很好。但是我希望它在移动设备上更先进，并将第一列锁定到位 -> 其他所有内容都应该向左滚动。仅使用 HTML 和 CSS 是如何做到的？我有 theme.css 和 CSS 代码，并且将为页面本身制作自定义 HTML 代码模块 table。

这里也有一些解决方案，但是通过使用建议的方法，我的 table 出现故障并且无法正确显示。

.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

我可能只建议两个 serpate tables。

在你的第一个 table 中，你只是将它设置为永远不会像你想要的那样移动。

第二个 table 您设置为可滚动。

<table class="New Table for header only">
<th colspan="# of columns">Table</th>
<td>Ranger Rover</td>
<td>Mercedes</td>
<td>toyota</td>
</table>

然后只需合并来自其他 table 的数据，而不附加 headers。

这应该行得通吧？除非我误解了这个问题。

可滚动 table，用 CSS 冻结第一列，Joomla

Scrollable table, freezed first column with CSS, Joomla

html

css

joomla

html-table

css-position