表格中某些列的水平滾動？

Question

在表格中，我需要將一列“固定”到位並讓其他其他列水平滾動。 這是一個視覺示例：

我嘗試使用溢出滾動，但它似乎什么也沒做：

.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

我已經修改了 w3schools 標准表，其中一列位於左側。 這種樣式可以通過 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