具有固定列和标题的可滚动表，具有现代CSS [英] Scrollable table with fixed columns and header, with modern CSS
本文介绍了具有固定列和标题的可滚动表，具有现代CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用现代CSS制作尽可能少的JavaScript表格？
我想要的功能是：
- 固定列（定位和宽度）
- 在X和Y轴上可滚动
- 在X轴上响应（对于非固定宽度列）。
注意：我确实看到并分析了SO中一些最受欢迎/最常见的问题和答案，例如
我的想法：
a） ：在固定列中使用 position：fixed;
问题：
-
< td>元素高度必须由JavaScript定义或计算。 - 需要滚动事件监听器，我们需要以编程方式滚动固定列
b） ：使用div（s）来伪造左列和h ave表格中的可滚动内容
问题：
- div height必须与表行高度同步
- HTML语义丢失，因为修复的假列不再是表格语法
c） ：使用 N 表只显示每个部分，因此我可以使用HTML标记但保留固定标题/列。
问题：
- 重复HTML x N
- 必须同步尺寸并使用JavaScript滚动
使用滚动事件监听器和固定左列我们可以使用这样的JavaScript：
const firstColumn = [... document.querySelectorAll（'table tr> *：first-of-type'）]; const tableContainer = document.querySelector（'。table-container '）; tableContainer.addEventListener（'scroll'，function（）{const currentScrollPosition = this.scrollTop * -1; firstColumn.forEach（el => el.style.marginTop = currentScrollPosition +'px'）;}）;
.table-container {width：600px;身高：300px; overflow-x：scroll; overflow-y：scroll;}。table-scroller {width：1000px;} table {width：100％; margin-left：-13px; table-layout：fixed;边界崩溃：崩溃; border：none;} table th，table td {padding：0.8em;边框：1px固体; background-color：#eeeeef;} table th {background-color：＃6699FF; font-weight：bold;} table tr {height：60px; vertical-align：middle;} table tr> *：第一类{position：fixed;宽度：50px; margin-left：13px; margin-top：0; height：inherit;}
< div class =table -container> < div class =table-scroller> <表> < TBODY> < TR> < td> Edrward 0< / td> < TD> 32< / TD> < td>伦敦公园号码0℃; / TD> < td>伦敦公园号码0℃; / TD> < td>伦敦公园号码0℃; / TD> < td>伦敦公园号码0℃; / TD> < td>伦敦公园号码0℃; / TD> < td>伦敦公园号码0℃; / TD> < td>伦敦公园号码0℃; / TD> < td>伦敦公园号码0℃; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 1< / td> < TD> 32< / TD> < td>伦敦公园号码1·; / TD> < td>伦敦公园号码1·; / TD> < td>伦敦公园号码1·; / TD> < td>伦敦公园号码1·; / TD> < td>伦敦公园号码1·; / TD> < td>伦敦公园号码1·; / TD> < td>伦敦公园号码1·; / TD> < td>伦敦公园号码1·; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 2< / td> < TD> 32< / TD> < td>伦敦公园号码2'; / TD> < td>伦敦公园号码2'; / TD> < td>伦敦公园号码2'; / TD> < td>伦敦公园号码2'; / TD> < td>伦敦公园号码2'; / TD> < td>伦敦公园号码2'; / TD> < td>伦敦公园号码2'; / TD> < td>伦敦公园号码2'; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 3< / td> < TD> 32< / TD> < td>伦敦公园号码3'; / TD> < td>伦敦公园号码3'; / TD> < td>伦敦公园号码3'; / TD> < td>伦敦公园号码3'; / TD> < td>伦敦公园号码3'; / TD> < td>伦敦公园号码3'; / TD> < td>伦敦公园号码3'; / TD> < td>伦敦公园号码3'; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 4< / td> < TD> 32< / TD> < td>伦敦公园号码4℃; / TD> < td>伦敦公园号码4℃; / TD> < td>伦敦公园号码4℃; / TD> < td>伦敦公园号码4℃; / TD> < td>伦敦公园号码4℃; / TD> < td>伦敦公园号码4℃; / TD> < td>伦敦公园号码4℃; / TD> < td>伦敦公园号码4℃; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 5< / td> < TD> 32< / TD> < td>伦敦公园号码5℃; / TD> < td>伦敦公园号码5℃; / TD> < td>伦敦公园号码5℃; / TD> < td>伦敦公园号码5℃; / TD> < td>伦敦公园号码5℃; / TD> < td>伦敦公园号码5℃; / TD> < td>伦敦公园号码5℃; / TD> < td>伦敦公园号码5℃; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 6< / td> < TD> 32< / TD> < td>伦敦公园号码6版; / TD> < td>伦敦公园号码6版; / TD> < td>伦敦公园号码6版; / TD> < td>伦敦公园号码6版; / TD> < td>伦敦公园号码6版; / TD> < td>伦敦公园号码6版; / TD> < td>伦敦公园号码6版; / TD> < td>伦敦公园号码6版; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 7< / td> < TD> 32< / TD> < td>伦敦公园号码7 LT; / TD> < td>伦敦公园号码7 LT; / TD> < td>伦敦公园号码7 LT; / TD> < td>伦敦公园号码7 LT; / TD> < td>伦敦公园号码7 LT; / TD> < td>伦敦公园号码7 LT; / TD> < td>伦敦公园号码7 LT; / TD> < td>伦敦公园号码7 LT; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 8< / td> < TD> 32< / TD> < td>伦敦公园号码8 LT; / TD> < td>伦敦公园号码8 LT; / TD> < td>伦敦公园号码8 LT; / TD> < td>伦敦公园号码8 LT; / TD> < td>伦敦公园号码8 LT; / TD> < td>伦敦公园号码8 LT; / TD> < td>伦敦公园号码8 LT; / TD> < td>伦敦公园号码8 LT; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < TR> < td> Edrward 9< / td> < TD> 32< / TD> < td>伦敦公园号码9版; / TD> < td>伦敦公园号码9版; / TD> < td>伦敦公园号码9版; / TD> < td>伦敦公园号码9版; / TD> < td>伦敦公园号码9版; / TD> < td>伦敦公园号码9版; / TD> < td>伦敦公园号码9版; / TD> < td>伦敦公园号码9版; / TD> < td>< a href =＃>操作< / a>< / td> < / TR> < / tbody的> < /表> < / div>< / div>
但我可以在没有JavaScript的情况下这样做？
关于可能的重复建议：
在我的问题中提到了可能的重复，它没有我想要的东西。那个问题要求只有一个左列被冻结 - 这个范围更广泛，它与固定标题，固定列和可滚动体有关。
另一个问题和接受的答案来自2009年！我认为这个主题，我的具体范围和例子值得重新审视。另外：我的JS解决方案只是JS如何破解的一个例子，我正在寻找现代的CSS技术来做到这一点。
解决方案
也许你可以尝试使用最近的位置：sticky 来实现这一目标。或者，至少，用较少的javascript启动aproach。
div {溢出：汽车;宽度：100％;身高：200px;} td，th {border：1px solid＃000; width：100px;} {background-color：red;} table {table-layout：fixed; width：100％;} td：first-child，th：first-child {position：sticky;左：0;的z-index：1; background-color：gray;} td：last-child，th：last-child {position：sticky;右：0;的z-index：1; background-color：blue;} thead tr th {position：sticky; top：0;} th：first-child，th：last-child {z-index：2; background-color：red;}
< div> <表> < THEAD> < TR> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> <的第i;&安培; NBSP;&安培; NBSP;&安培; NBSP;< /第> < / TR> < / THEAD> < TBODY> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < TR> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < TD>&安培; NBSP;&安培; NBSP;&安培; NBSP;< / TD> < / TR> < / tbody的> < / table>< / div>
How to make a table with so little JavaScript as possible using modern CSS?
The features I'm trying to have is:
- fixed column(s) (positioning and width)
- scrollable in X and Y axis
- responsive in the X axis (for non fixed width columns).
Note: I did see and analyse some of the most popular/seen questions and answers in SO, like here and here for example.
I know this can be done with JavaScript event handlers for scroll so that a fixed column can be moved down/up to follow the main column. A example of the functionality I am trying to build (but heavily scripted) could be like this. We can also add MutationObserver in the parent element to the table to detect size changes and calculate again the sizes of the table. But this is expensive in performance, and since CSS is also evolving and modernizing I wonder if there are new ways...
Is there a 2017/2018 solution for this that is only CSS or as little JS overhead as possible?
I would like to avoid having to implement JavaScript solutions that break so easy like this:
My ideas:
a): use position: fixed; in the fixed columns
Problems:
<td>elements height has to be defined or calculated by JavaScript.- a scroll event listener is needed and we need to scroll the fixed column programmatically
b): use div(s) to "fake" the left column and have the scrollable content in the table
Problems:
- div height has to sync with table rows height
- HTML semantics lost since fixed "fake" column is not table syntax any more
c): use N tables show only parts of each so I can have HTML markup but keep fixed header/columns.
Problems:
- repeated HTML x N
- have to sync sizes and scroll with JavaScript also
Using a scroll event listener and a fixed left column we can use JavaScript like this:
const firstColumn = [...document.querySelectorAll('table tr > *:first-of-type')];
const tableContainer = document.querySelector('.table-container');
tableContainer.addEventListener('scroll', function() {
const currentScrollPosition = this.scrollTop * -1;
firstColumn.forEach(el => el.style.marginTop = currentScrollPosition + 'px');
});
.table-container {
width: 600px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
.table-scroller {
width: 1000px;
}
table {
width: 100%;
margin-left: -13px;
table-layout: fixed;
border-collapse: collapse;
border: none;
}
table th,
table td {
padding: 0.8em;
border: 1px solid;
background-color: #eeeeef;
}
table th {
background-color: #6699FF;
font-weight: bold;
}
table tr {
height: 60px;
vertical-align: middle;
}
table tr > *:first-of-type {
position: fixed;
width: 50px;
margin-left: 13px;
margin-top: 0;
height: inherit;
}
<div class="table-container">
<div class="table-scroller">
<table>
<tbody>
<tr>
<td>Edrward 0</td>
<td>32</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 1</td>
<td>32</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 2</td>
<td>32</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 3</td>
<td>32</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 4</td>
<td>32</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 5</td>
<td>32</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 6</td>
<td>32</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 7</td>
<td>32</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 8</td>
<td>32</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 9</td>
<td>32</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td><a href="#">action</a></td>
</tr>
</tbody>
</table>
</div>
</div>
But can I do this without JavaScript?
About the possible duplicate suggestion:
That possible duplicate is mentioned in my question and it does not have what I'm looking for. That question asks for "just a single left column to be frozen" - the scope of this one is more broad, its relates to fixed header, fixed columns and scrollable body.
The other question and the accepted answer are from 2009! I think this topic, with my specific scope and examples is worth being revisited. Also: my "JS solution" is just a example how JS can break, I'm looking for modern CSS techniques for doing just that.
解决方案
Maybe you could try to use the recent position:stickyto achieve it. Or, at least, to start the aproach with less javascript.
div{
overflow:auto;
width:100%;
height:200px;
}
td,
th {
border: 1px solid #000;
width: 100px;
}
th {background-color:red;}
table {
table-layout: fixed;
width:100%;
}
td:first-child, th:first-child {
position:sticky;
left:0;
z-index:1;
background-color:grey;
}
td:last-child, th:last-child {
position:sticky;
right:0;
z-index:1;
background-color:blue;
}
thead tr th {
position:sticky;
top:0;
}
th:first-child, th:last-child {z-index:2;background-color:red;}
<div>
<table>
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
这篇关于具有固定列和标题的可滚动表，具有现代CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
