表格中某些列的水平滚动？

Question

Within a table I need to 'pin' a column in place and have other other colums horizontally scrollable.在表格中，我需要将一列“固定”到位并让其他其他列水平滚动。 Here is a visual example:这是一个视觉示例：

I tried using overflow scroll but it appears to do nothing:我尝试使用溢出滚动，但它似乎什么也没做：

.horizontal-scrolling {
  display: flex;
  width: 500px;
  overflow: scroll;
}

.horizontal-scrolling th {
  width: 250px;
}

<table>
    <thead>
        <tr>
            <th>First</th>
            <span class="horizontal-scrolling">
                <th>Second</th>
                <th>Third</th>
                <th>Fourth</th>
            </span>
        </tr>
    <thead>
</table>

Answer 1

I've modified the w3schools standart table, to where one column sticks to the left.我已经修改了 w3schools 标准表，其中一列位于左侧。 this kind of styling can be applied to a specific column of your table by javascript这种样式可以通过 javascript 应用于表格的特定列

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 1000px; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } tr th:nth-of-type(1),/*this is where the table column gets its*/ tr td:nth-of-type(1){/*styling to stick to the left and stay ontop of the rest*/ position:sticky; left: 0; z-index: 1; background: white; width: 150px } div { width: 600px; overflow: auto; }

 <body> <h2>HTML Table</h2> <div> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </div> </body>

表格中某些列的水平滚动？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-04 12:37:23

表格中某些列的水平滚动？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-04 12:37:23

解决方案1
1 已采纳 2020-06-04 12:37:23