如何使一些列固定和一些表可滚动？

问题描述

我正在使用twitter-bootstrap 3开发一个网页，有些表格不适合我的页面边距。他们溢出。所以我想创建一个像Excel电子表格一样工作的结构。

最左边的两列（蓝色区域）将被修复，剩余列将被显示。如果用户向右滚动表格的滚动条，则会显示溢出的列。你可以看到我想要的图片。

把表放入一个div并规定div overflow-x：scroll 对我来说不是一个解决方案。因为前两列必须始终可见。

有一个解决方案我已经试过了。只有当我将窗口缩小为较小的宽度值时才起作用。

解决方案

你可以试试这个：

将表格换成div， b绝对位置你的前2列，给他们一些宽度（可以说 Apx 和 Bpx ），

使用 margin-left：（A + B）px 和 overflow-x：scroll 到包装div

小提琴：

I am developing a web page using twitter-bootstrap 3 and some tables are not fitting my page's margins. They overflow. So I want to create a structure which works like Excel spreadsheet.

The most left two columns (blue region) will be fixed and the remainin columns will be shown as possible. Overflowing columns will be displayed if user scrolls the table's scroll bar to right. You can see the picture how I want it to be.

Putting the table into a div and rule the div overflow-x:scroll is not a solution for me. Because The first two columns must be visible all the time.

There is a solution here I have tried this. It works only when I shrink the window into smaller width value.

解决方案

You could try this:
Wrap your table in a div,
Absolute position your first 2 columns, give them some width (Lets say Apx and Bpx),
Use margin-left:(A+B)px and overflow-x:scroll to the wrapper div

Fiddle: http://jsfiddle.net/ycYdL/

这篇关于如何使一些列固定和一些表可滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！