css HTML表格左列固定时水平和垂直滚动

k2arahey 于 12个月前发布在其他

关注(0)|答案(2)|浏览(129)

我正在尝试创建一个HTML表格，其中高度有限，左侧在水平滚动时保持固定（表体可水平滚动），但在垂直滚动时不固定（左侧将与表格的其余部分一起滚动）。

fixed    scrollable
  1     body content
  2     body content
  3     body content
  4     body content
  .          .
  .          .
  .          .

字符串
我发现了this solution，但它只解决了水平滚动。在 Eamon NerbonnejsFiddle**示例中，向div添加height: 150px;将演示我试图解决的bug。
是否可以只使用HTML和CSS来实现？

css

来源：https://stackoverflow.com/questions/20869642/html-table-horizontal-and-vertical-scrolling-while-left-column-is-fixed

2条答案

按热度按时间

w6mmgewl1#

在Eamon Nerbonne的solution中添加另一个div，得到了以下解决方案：
jsFiddle的
基本上的解决方案是，如果您添加另一个控制二级div流的父div，则可能会给您给予机会。

<div class="first">
    <div class="second">
        <table>
            <tr><td class="headcol">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">5</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">6</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">7</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">8</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">9</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        </table>
    </div>
</div>

字符串
我为外部div添加了如下样式：

div.first {
    width: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 150px;     /* this is the height that you expect to contain */      
    padding-bottom: 1px;
    position: absolute;
    left:0;
    top:auto;
}

型

赞(0）回复(0）举报 12个月前

ldioqlga2#

有点晚，但我确实在尝试自己的解决方案时遇到了这个线程。假设你现在使用现代浏览器，我想出了一个解决方案，使用CSS calc（）来帮助保证宽度满足。

.table-fixed-left table,
.table-fixed-right table {
  border-collapse: collapse;
}
.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
  border: 1px solid #ddd;
  padding: 5px 5px;
}
.table-fixed-left {
  width: 120px;
  float: left;
  position: fixed;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: left;
  border: 1px solid #ddd;
  z-index: 2;
}
.table-fixed-right {
  width: calc(100% - 145px);
  right: 15px;
  position: fixed;
  overflow-x: scroll;
  border: 1px solid #ddd;
  white-space: nowrap;
}
.table-fixed-right td,
.table-fixed-right th {
  padding: 5px 10px;
}

个字符
希望这对任何人都有帮助！

赞(0）回复(0）举报 12个月前

我来回答

css HTML表格左列固定时水平和垂直滚动

2条答案

相关问题

热门标签

最新问答