文章/答案/技术大牛

发布

社区首页 >问答首页 >表格中某些列的水平滚动？

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

Stack Overflow用户

提问于 2020-06-04 19:58:02

回答 1查看 39关注 0票数 1

在一个表格中，我需要‘固定’一个列的位置，并有其他列水平滚动。下面是一个可视化的示例：

我尝试使用overflow scroll，但它似乎没有任何作用：

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

css

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-04 20:37:23

我已经修改了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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62194049

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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