Question

我知道有一些扩展可以实现这一点，但我想这样做（如果可能的话）。我已经尝试了几种方法＆＃34; child＆＃34;和nowrap命令，但不能让它工作。我做了桌子，一切都很好。但是我希望它在移动设备上更先进并锁定第一列 - ＆gt;其他一切都应向左滚动。如何只使用HTML和CSS来完成它。我有带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

我可能会建议两个serpate表。

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

你可以滚动的第二个表。

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

然后只需合并其他表中的数据而不附加标题。

这应该正常吗？除非我误解了这个问题。

可滚动表格，带有CSS的冻结第一列，Joomla

1 个答案: