如何创建带有固定/冻结左列和可滚动正文的 HTML 表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1312236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 00:39:41 来源:igfitidea点击:
How do I create an HTML table with a fixed/frozen left column and a scrollable body?
提问by agsamek
I need a simple solution. I know it's similar to some other questions, like:
我需要一个简单的解决方案。我知道这类似于其他一些问题，例如：
- HTML table with fixed headers and a fixed column?
- How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?
But I need just a single left column to be frozen and I would prefer a simple and script-less solution.
但我只需要冻结一个左列，我更喜欢简单且无脚本的解决方案。
回答by Eamon Nerbonne
If you want a table where only the columns scroll horizontally, you can position: absolutethe first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scrollblock. Don't bother trying this in IE7, however...
如果您想要一个只有列水平滚动的表格，您可以position: absolute选择第一列（并明确指定其宽度），然后将整个表格包装在一个overflow-x: scroll块中。不要费心在 IE7 中尝试这个，但是......
Relevant HTML & CSS:
相关的 HTML 和 CSS：
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td, th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}<div>
<table>
<tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table>
</div>回答by Markos Fragkakis
回答by Marcin Raczyński
In case of fixed width left column the best solution is provided by Eamon Nerbonne.
对于固定宽度的左列，Eamon Nerbonne提供了最佳解决方案。
In case of variable width left column the best solution I found is to make two identical tables and push one above another. Demo: http://jsfiddle.net/xG5QH/6/.
如果左列宽度可变，我发现的最佳解决方案是制作两个相同的表格并将一个放在另一个上面。演示：http: //jsfiddle.net/xG5QH/6/。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */
.container {
/* Attach fixed-th-table to this container,
in order to layout fixed-th-table
in the same way as scolled-td-table" */
position: relative;
/* Truncate fixed-th-table */
overflow: hidden;
}
.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
/* Set background to non-transparent color
because two tables are one above another.
*/
background: white;
}
.fixed-th-table-wrapper {
/* Make table out of flow */
position: absolute;
}
.fixed-th-table-wrapper th {
/* Place fixed-th-table th-cells above
scrolled-td-table td-cells.
*/
position: relative;
z-index: 1;
}
.scrolled-td-table-wrapper td {
/* Place scrolled-td-table td-cells
above fixed-th-table.
*/
position: relative;
}
.scrolled-td-table-wrapper {
/* Make horizonal scrollbar if needed */
overflow-x: auto;
}
/* Simulating border-collapse: collapse,
because fixed-th-table borders
are below ".scrolling-td-wrapper table" borders
*/
table {
border-spacing: 0;
}
td, th {
border-style: solid;
border-color: black;
border-width: 1px 1px 0 0;
}
th:first-child {
border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
border-bottom-width: 1px;
}
/* Unimportant styles */
.container {
width: 250px;
}
td, th {
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
- same as fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
</div>
</body>
</html>
回答by Circuit Breaker
You can use stickyposition.
Here is a sample code. This is HTML/CSS solution. No js is required.
您可以使用sticky位置。这是一个示例代码。这是 HTML/CSS 解决方案。不需要js。
.view {
margin: auto;
width: 600px;
}
.wrapper {
position: relative;
overflow: auto;
border: 1px solid black;
white-space: nowrap;
}
.sticky-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100px;
left: 0px;
}
.second-col {
width: 150px;
min-width: 150px;
max-width: 150px;
left: 100px;
}<div class="view">
<div class="wrapper">
<table class="table">
<thead>
<tr>
<th class="sticky-col first-col">Number</th>
<th class="sticky-col second-col">First Name</th>
<th>Last Name</th>
<th>Employer</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col first-col">1</td>
<td class="sticky-col second-col">Mark</td>
<td>Ham</td>
<td>Micro</td>
</tr>
<tr>
<td class="sticky-col first-col">2</td>
<td class="sticky-col second-col">Jacob</td>
<td>Smith</td>
<td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
</tr>
<tr>
<td class="sticky-col first-col">3</td>
<td class="sticky-col second-col">Larry</td>
<td>Wen</td>
<td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
</tr>
</tbody>
</table>
</div>
</div>Bootply code: https://www.bootply.com/g8pfBXOcY9
Bootply 代码：https://www.bootply.com/g8pfBXOcY9
回答by Adam Grant
FWIW, here is a table that is scrollable with the head and side fixed.
FWIW，这是一个头部和侧面固定的可滚动表格。
回答by Zach Botterman
A little late but I did run across this thread when trying out solutions for myself. Assuming you're using modern browsers nowadays, I came up with a solution using CSS calc() to help guarantee widths met up.
有点晚了，但我在为自己尝试解决方案时确实遇到了这个线程。假设你现在使用现代浏览器，我想出了一个使用 CSS calc() 的解决方案来帮助保证宽度满足。
.table-fixed-left table,
.table-fixed-right table {
border-collapse: collapse;
}
.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
border: 1px solid #ddd;
padding: 5px 5px;
}
.table-fixed-left {
width: 120px;
float: left;
position: fixed;
overflow-x: scroll;
white-space: nowrap;
text-align: left;
border: 1px solid #ddd;
z-index: 2;
}
.table-fixed-right {
width: calc(100% - 145px);
right: 15px;
position: fixed;
overflow-x: scroll;
border: 1px solid #ddd;
white-space: nowrap;
}
.table-fixed-right td,
.table-fixed-right th {
padding: 5px 10px;
}<div class="table-fixed-left">
<table>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Header with extra line
<br/> </th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Normal with extra line
<br/> </th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
<tr>
<th>Normal Header</th>
</tr>
</table>
</div>
<div class="table-fixed-right">
<table>
<tr>
<th>Header</th>
<th>Another header</th>
<th>Header</th>
<th>Header really really really really long</th>
</tr>
<tr>
<td>Info Long</td>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info Long</td>
</tr>
<tr>
<td>Info Long</td>
<td>Info Long</td>
<td>Info Long</td>
<td>Info Long</td>
</tr>
<tr>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info
<br/>with second line</td>
<td>Info</td>
</tr>
<tr>
<td>Info</td>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<td>Info</td>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
</table>
</div>Hope this helps someone!
希望这可以帮助某人！
回答by chaos
Style the left column with position: fixed. (You'll presumably want to use topand leftstyles to control where exactly it occurs.)
用 设置左列的样式position: fixed。（您可能想要使用top和left样式来控制它发生的确切位置。）
回答by kojow7
For most browsers released after 2017:
对于 2017 年之后发布的大多数浏览器：
You can use the position: sticky. See https://caniuse.com/#feat=css-sticky.
您可以使用position: sticky. 请参阅https://caniuse.com/#feat=css-sticky。
There is no need for a fixed width column.
不需要固定宽度的列。
Run the code snippet below to see how it works.
运行下面的代码片段，看看它是如何工作的。
.tscroll {
width: 400px;
overflow-x: scroll;
margin-bottom: 10px;
border: solid black 1px;
}
.tscroll table td:first-child {
position: sticky;
left: 0;
background-color: #ddd;
}
.tscroll td, .tscroll th {
border-bottom: dashed #888 1px;
}<html>
<div class="tscroll">
<table>
<thead>
<tr>
<th></th>
<th colspan="5">Heading 1</th>
<th colspan="8">Heading 2</th>
<th colspan="4">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>10:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>11:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>12:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>13:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>14:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>15:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>16:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
<tr>
<td>17:00</td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
<td>LLL</td>
<td>MMM</td>
<td>NNN</td>
<td>OOO</td>
<td>PPP</td>
<td>QQQ</td>
</tr>
</tbody>
</table>
</div>回答by Jonathan.
I took Earmon Nerbonne's answer and edited it to work with tables that fill the whole width.
我接受了 Earmon Nerbonne 的答案并对其进行了编辑，以使用填充整个宽度的表格。
<!DOCTYPE html>
<html><head><title>testdoc</title>
<style type="text/css">
body {
font:16px Calibri;
}
table {
border-collapse:separate;
border-top: 3px solid grey;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 5em;
}
#innerdiv {
width: 100%;
overflow-x:scroll;
margin-left: 5em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
.headcol:before {
content:'Row ';
}
.long {
background:yellow;
letter-spacing:1em;
}
</style></head><body>
<div id="outerdiv">
<div id="innerdiv">
<table>
<tr>
<td class="headcol">1</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">2</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">3</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">4</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">5</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">6</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">7</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">8</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">9</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div></div>
</body></html>
The width of the fixed column still needs to be a set value though.
固定列的宽度仍然需要是一个设定值。
回答by kashesandr
If you're developing something more complicated and want multiple columns to be fixed/stuck to the left, you'll probably need something like this.
如果您正在开发更复杂的东西并希望将多个列固定/卡在左侧，您可能需要这样的东西。
.wrapper {
overflow-x: scroll;
}
td {
min-width: 50px;
}
.fixed {
position: absolute;
background: #aaa;
}<div class="content" style="width: 400px">
<div class="wrapper" style="margin-left: 100px">
<table>
<thead>
<tr>
<th class="fixed" style="left: 0px">aaa</th>
<th class="fixed" style="left: 50px">aaa2</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed" style="left: 0px">aaa</td>
<td class="fixed" style="left: 50px">aaa2</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td class="fixed" style="left: 0">bbb</td>
<td class="fixed" style="left: 50px">bbb2</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</tbody>
</table>
</div>
</div>