如何创建一个具有固定/冻结左列和可滚动体的HTML表？ [英] how do I create an HTML table with fixed/frozen left column and scrollable body?
本文介绍了如何创建一个具有固定/冻结左列和可滚动体的HTML表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何创建一个包含固定/冻结左列和可滚动主体的HTML表格？
How do I create an HTML table with fixed/frozen left column and scrollable body?
我需要一个简单的解决方案。我知道它类似于一些其他问题，如：
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?
但我只需要一个左
推荐答案
如果你想要一个表，其中只有列水平滚动，您可以 position：absolute 第一列（并显式指定其宽度），然后将整个表包装在 overflow-x：滚动块。
If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...
演示： http://jsfiddle.net/emn13/YMvk9/
相关HTML& CSS：
Relevant HTML & CSS:
<!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, th {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
div {
width: 600px;
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><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>
<tr><th class="headcol">7</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">8</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><th class="headcol">9</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>
</body>
</html>
这篇关于如何创建一个具有固定/冻结左列和可滚动体的HTML表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
