使第一列固定，下一列在 html 表中可滚动

Make first column fixed and next column scrollable in html Table

提问by monda

I have a table with only two columns . i want to make first column is fixed and next column scrollable in all the rows..it should be horizontally scrollable as a whole .. not individual columns

我有一个只有两列的表。我想让第一列是固定的，下一列可以在所有行中滚动..它应该作为一个整体水平滚动..不是单个列

There can be hundreds of rows. .

可以有数百行。.

I have a demo code here in Jsfiddle

我在Jsfiddle 中有一个演示代码

I dont have much exposure to css styling.

我对 css 样式的接触不多。

回答by neokio

You could use CSS overflow:auto;, as in http://jsfiddle.net/Yw679/2/

您可以使用 CSS overflow:auto;，如http://jsfiddle.net/Yw679/2/

If I understand correctly, you want the entire left column to be static, and the entire right column (including the header) to be horizontally scrollable. Is that correct?

如果我理解正确，您希望整个左列都是静态的，并且整个右列（包括标题）都可以水平滚动。那是对的吗？

If so, it's not possible with one table. But with a bit of extra code, it's possible with two tables like this: http://jsfiddle.net/Yw679/6/

如果是这样，一张桌子是不可能的。但是通过一些额外的代码，可以使用这样的两个表：http: //jsfiddle.net/Yw679/6/

回答by Robin Maben

What you're searching for is called "frozen columns".

您要搜索的内容称为“冻结列”。

See a jqGrid demo herethat implements column freezing in version 4.3. It's quite a versatile grid plugin and definitely worth a try(if you haven't already, that is).

请参阅此处的 jqGrid演示，该演示在4.3版中实现了列冻结。这是一个非常通用的网格插件，绝对值得一试（如果你还没有，那就是）。

回答by user3146706

I think you want to do something like this example

我想你想做类似这个例子的事情

https://www.datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

https://www.datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

回答by Prakash Bhavnath

It's better to use a single table along with two column fixed and other are scrollable.

最好使用单个表和两列固定，其他列是可滚动的。

Here is thelink.

Here is the链接。

回答by Max Girkens

You could do something like this:

你可以这样做：

http://jsfiddle.net/Yw679/3/

http://jsfiddle.net/Yw679/3/

th{
  display :inline-block;
  height: 50px;
  width: 100px;
  overflow: scroll;
}

th:first-child{
  overflow: hidden;
}

?

?