使用 CSS 或 Angularjs 冻结第一个表格 HTML 列 [重复]

Posted 2023-03-05

【中文标题】使用 CSS 或 Angularjs 冻结第一个表格 HTML 列 [重复]

【英文标题】：Frozen first table HTML column with CSS or Angularjs [duplicate]

【发布时间】：2015-11-14 01:15:09

【问题描述】：

我有一张表，我想在其中保留第一列，如果可能的话，第一行也被冻结

所以我可以拥有一个非常大的数据集并查看数据所属的位置

我尝试使用 style="position: fixed"，也是绝对的，它们都不起作用。

所以 dsr1、dsr2、dtr1 等可以滚动，而 fr1、frw2、fc1、fc2 将保持固定。

-------------------------
fr1 | frw2 |frw3 |frw4 |
---------------------
fc1 | dsr1 |dsr2 |dsr3 |
---------------------
fc2 | dtr1 |dtr2 |dtr3 |  

尝试过，但没有成功：

-------------------------
fr1 style="position:fixed "| frw2 |frw3 |frw4 |
---------------------
fc1 | dsr1 |dsr2 |dsr3 |
---------------------
fc2 | dtr1 |dtr2 |dtr3 | 

【问题讨论】：

您是否尝试在一个 DIV 中构建冻结的部分并将可滚动部分构建到另一个 DIV 中？

这个问题和angularjs有什么关系？

我正在寻找一个 angularjs 指令

【参考方案1】：

你可以试试这个，

div 
  width: 300px;
  overflow-x: scroll;
  margin-left: 50px;
  overflow-y: visible;
  padding-bottom: 1px;

td 
  padding: 0 40px;

<div>
  <table>
    <tr>
      <td style="position:absolute;width:50px; left:0;">fr1</td>
      <td>frw2</td>
      <td>frw3</td>
      <td>frw4</td>
    </tr>
    <tr>
      <td style="position:absolute;width:50px;left:0; ">fc1</td>
      <td>dsr1</td>
      <td>dsr2</td>
      <td>dsr3</td>
    </tr>
    <tr>
      <td style="position:absolute;width:50px;left:0; ">fc2</td>
      <td>dtr1</td>
      <td>dtr2</td>
      <td>dtr3</td>
    </tr>
  </table>
</div>

Demo

【讨论】：

这个解决方案更简单，工作也很好。