Question

我知道有一些扩展可以实现这一点，但我想这样做（如果可能的话）。我已经尝试了几种方法＆＃34; child＆＃34;和nowrap命令，但不能让它工作。我做了桌子，一切都很好。但是我希望它在移动设备上更先进并锁定第一列 - ＆gt;其他一切都应向左滚动。如何只使用HTML和CSS（没有Javascript）。我有带CSS代码的theme.css，并将为包含表格的页面制作自定义HTML代码模块。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

可滚动表，使用CSS锁定第一列，Joomla

1 个答案: