在 HTML 表格中实现 Word 冻结功能答案

【问题标题】：Implement Word freeze functionality in HTML table在 HTML 表格中实现 Word 冻结功能
【发布时间】：2022-01-09 16:29:31
【问题描述】：

由于我是设计初学者，对 CSS 操作了解不多，所以需要一些帮助。

我有一个 HTML 页面，想要实现与我们在 Word 中使用的相同的冻结功能。

这里我有表格，想冻结前 4 列，这样它就不会移动并保持粘性，最后一列显示总数，并且只允许在列之间使用滚动条移动。

注意：表格是动态的，行和列也是动态的。这是我的代码[https://jsfiddle.net/padhiyarmahavirsinh/b51k20sr/3/][2]

【问题讨论】：

标签： html css html-table ms-word

【解决方案1】：

基本思想是制作两张表格，给一张固定高度并添加一个滚动条。您将不得不为您的网站调整它

//not part of styling, just to get the total
const total = document.querySelector("table:last-of-type tr td:last-child");
const money = document.querySelectorAll("table:first-of-type tr td:last-child");
let sum = 0;

money.forEach(({
  innerText
}) => {
  sum += parseInt(innerText);
});

total.innerText = sum;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  width: 125px;
  display: flex;
  overflow: hidden;
}

table:first-of-type {
  height: 150px;
  overflow-y: scroll;
}

td,
th {
  border: 1px solid grey;
  text-align: center;
}

td {
  height: 40px;
  width: 50px;
}

<table>
  <tr>
    <th>name</th>
    <th>money</th>
  </tr>
  <tr>
    <td>a</td>
    <td>7923</td>
  </tr>
  <tr>
    <td>b</td>
    <td>7981</td>
  </tr>
  <tr>
    <td>c</td>
    <td>3724</td>
  </tr>
  <tr>
    <td>d</td>
    <td>4234</td>
  </tr>
  <tr>
    <td>e</td>
    <td>12939</td>
  </tr>
  <tr>
    <td>f</td>
    <td>3247</td>
  </tr>
  <tr>
    <td>g</td>
    <td>5798</td>
  </tr>
  <tr>
    <td>h</td>
    <td>5324</td>
  </tr>
</table>
<table>
  <tr>
    <td>total</td>
    <td>0</td>
  </tr>
</table>

【讨论】：