<think>我们参考用户提供的引用内容，特别是引用[2]和引用[3]中关于固定表头和列的实现思路，但用户要求使用原生表格（即不使用Vue等框架）实现固定左侧列的功能。
实现思路：
1. 将整个表格分为三个部分：固定列（左侧）、表头（除固定列外的表头）和主体部分（除固定列外的表格主体）。
2. 使用三个表格分别表示：固定列（包含表头和主体）、表头（右侧部分）、主体（右侧部分）。注意，为了对齐，这三个表格的行高和列宽需要保持一致。
3. 使用容器和CSS样式控制布局，特别是使用绝对定位或固定定位来固定左侧列和表头。
4. 当滚动主体部分时，通过JavaScript同步固定列的滚动和表头的滚动（如果需要固定表头，则表头不滚动，但这里用户只要求固定列）。
但是，用户只要求固定左侧列，不要求固定表头。因此我们可以简化：
- 将表格分为两部分：左侧固定列（包含所有行的固定列部分）和右侧可滚动部分（包含表头和主体）。
- 右侧可滚动部分又分为：表头（右侧部分）和主体（右侧部分）。这样当水平滚动时，固定列不动；当垂直滚动时，固定列跟随垂直滚动（因为固定列是独立的一个表格，它也需要垂直滚动，但为了和主体同步滚动，我们需要用JS来同步垂直滚动）。
然而，为了简化，我们可以考虑只用一个表格来实现固定列，但这在原生HTML中比较困难。因此，我们采用三个表格的布局：
结构：
<div class="
table-container">
<div class="
fixed-
column">
<
table> ... </
table> <!-- 这个表格只包含需要固定的列，包含表头行和所有数据行 -->
</div>
<div class="scrollable-part">
<div class="header">
<
table> ... </
table> <!-- 这个表格只包含表头中非固定的列 -->
</div>
<div class="body">
<
table> ... </
table> <!-- 这个表格只包含数据行中非固定的列 -->
</div>
</div>
</div>
注意：为了保持对齐，三个表格的每一行的高度和每一列的宽度（对于固定列和表头对应的列）需要一致。
但是，这种方法在垂直滚动时，固定列需要和右侧主体部分同步滚动。我们可以通过JavaScript来实现。
然而，用户要求原生实现，我们尽量使用CSS，但同步滚动需要JS。
另一种思路：只用一个表格，然后对需要固定的列使用position: sticky; 这是更简单的方法，且不需要额外的JS。
我们优先考虑使用position: sticky来实现，因为现代浏览器支持较好。
具体步骤：
1. 创建一个普通的表格，设置每一列的样式。
2. 将需要固定左侧的列（通常是第一列）的单元格（包括表头单元格和数据单元格）设置为position: sticky; left: 0; 同时设置背景色（避免滚动时透明重叠）。
3. 注意：sticky定位是相对于最近的滚动容器，因此需要确保表格的容器有固定高度和overflow:auto。
示例代码：
HTML结构：
<div class="
table-container">
<
table>
<thead>
<tr>
<th class="
fixed-left">固定列1</th>
<th>表头1</th>
<th>表头2</th>
...
</tr>
</thead>
<tbody>
<tr>
<td class="
fixed-left">固定数据1</td>
<td>数据1</td>
<td>数据2</td>
...
</tr>
... 更多行 ...
</tbody>
</
table>
</div>
CSS样式：
.
table-container {
max-height: 300px; /* 设置固定高度，超出则滚动 */
overflow: auto;
}
.
fixed-left {
position: sticky;
left: 0; /* 固定在左侧 */
background: white; /* 背景色，避免透明 */
z-index: 10; /* 确保在滚动时覆盖其他单元格 */
}
/* 表头中的固定列需要更高的z-index，因为表头在滚动时也需要固定（如果垂直滚动表头固定则需要，但这里只固定列） */
thead .
fixed-left {
z-index: 20;
}
但是，如果用户同时需要固定表头（垂直方向固定）和固定列（水平方向固定），那么我们可以结合使用：
thead th {
position: sticky;
top: 0;
z-index: 15; /* 注意z-index的管理 */
}
thead .
fixed-left {
z-index: 25; /* 比普通表头更高，确保在左侧固定列上覆盖 */
}
不过，用户本次只要求固定左侧列，不要求固定表头。所以我们可以不固定表头。
但是，如果用户希望固定表头，我们可以根据需求添加。
根据用户要求，我们只实现固定左侧列。
我们写一个完整的示例，包括一些样式。
注意：如果有多列固定，可以依次设置left值（例如第一列left:0，第二列left:第一列的宽度，等等）。但用户要求固定左侧，我们假设固定第一列。
示例代码：</think>在原生 HTML/CSS/JavaScript 中实现表格左侧列固定功能，可通过以下方案实现：
### 实现原理
1. **分离结构**：将表格拆分为三个独立部分：
- 固定列（左侧）
- 表头（右侧）
- 滚动主体（右侧）
2. **CSS 定位**：使用 `position: sticky` 实现固定效果
3. **滚动同步**：通过 JavaScript 同步滚动位置
```html
<!DOCTYPE html>
<html>
<head>
<style>
.
table-container {
display: flex;
width: 600px;
height: 300px;
overflow: hidden;
border: 1px solid #ddd;
position: relative;
}
/* 固定列区域 */
.
fixed-
column {
width: 150px;
overflow: hidden;
z-index: 10;
background: white;
}
/* 可滚动区域 */
.scrollable-area {
flex: 1;
overflow: auto;
}
/* 固定列样式 */
.
fixed-
column table {
width: 100%;
border-collapse: collapse;
}
.
fixed-
column td {
border: 1px solid #dedede;
padding: 8px;
background: #f8f8f8;
position: sticky;
left: 0;
}
/* 表头和主体表格 */
.
table-header, .
table-body {
width: 100%;
border-collapse: collapse;
}
.
table-header th {
background: #eaeaea;
padding: 8px;
border: 1px solid #dedede;
position: sticky;
top: 0;
}
.
table-body td {
padding: 8px;
border: 1px solid #dedede;
}
</style>
</head>
<body>
<div class="
table-container">
<!-- 固定列 -->
<div class="
fixed-
column">
<
table id="
fixedColumn">
<tbody>
<tr><td>固定行1</td></tr>
<tr><td>固定行2</td></tr>
<!-- 行数据由JS动态生成 -->
</tbody>
</
table>
</div>
<!-- 可滚动区域 -->
<div class="scrollable-area" id="scrollableArea">
<!-- 表头 -->
<
table class="
table-header">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<!-- 列数据由JS动态生成 -->
</tr>
</thead>
</
table>
<!-- 主体 -->
<
table class="
table-body" id="main
Table">
<tbody>
<!-- 行数据由JS动态生成 -->
</tbody>
</
table>
</div>
</div>
<script>
// 生成表格数据
const rowCount = 20;
const colCount = 10;
// 生成固定列内容
const
fixedColumn = document.getElementById('
fixedColumn').querySelector('tbody');
for(let i = 0; i < rowCount; i++) {
const row = document.createElement('tr');
row.innerHTML = `<td>固定行${i+1}</td>`;
fixedColumn.appendChild(row);
}
// 生成表头
const
tableHeader = document.querySelector('.
table-header thead tr');
for(let i = 0; i < colCount; i++) {
const th = document.createElement('th');
th.textContent = `列${i+1}`;
tableHeader.appendChild(th);
}
// 生成主体内容
const main
Table = document.getElementById('main
Table').querySelector('tbody');
for(let i = 0; i < rowCount; i++) {
const row = document.createElement('tr');
for(let j = 0; j < colCount; j++) {
const td = document.createElement('td');
td.textContent = `数据${i+1}-${j+1}`;
row.appendChild(td);
}
main
Table.appendChild(row);
}
// 滚动同步功能
const scrollableArea = document.getElementById('scrollableArea');
const
fixedColumnContainer = document.querySelector('.
fixed-
column');
scrollableArea.addEventListener('scroll', function() {
fixedColumnContainer.scrollTop = this.scrollTop;
});
</script>
</body>
</html>
```
### 关键实现技术
1. **CSS 定位**：
- `position: sticky` 实现列固定效果
- `left: 0` 固定左侧位置
- `z-index` 控制层级关系[^3]
2. **布局分离**：
- 固定列独立容器（`.
fixed-
column`）
- 可滚动区域包含表头和主体（`.scrollable-area`）
- 使用 Flex 布局确保对齐[^4]
3. **滚动同步**：
```javascript
scrollableArea.addEventListener('scroll', function() {
fixedColumnContainer.scrollTop = this.scrollTop;
});
```
4. **动态生成**：
- JavaScript 动态创建表格内容
- 确保固定列与主体行数一致
### 注意事项
1. **层级关系**：固定列需要更高 `z-index` 防止被覆盖
2. **边框处理**：使用 `border-collapse: collapse` 保持边框一致
3. **性能优化**：大数据量时建议使用虚拟滚动
4. **浏览器兼容**：`position: sticky` 兼容现代浏览器（IE 不支持）
此方案通过纯原生技术实现固定列功能，避免了框架依赖，可直接整合到任何项目中[^2]。
介绍了如何使用Qt实现带有固定列功能的自定义表格组件，该功能允许用户在滚动表格时保持部分列的位置不变。
扫一扫
739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
