如何创建一个具有固定/冻结左列和可滚动体的HTML表？

本文介绍了如何创建一个具有固定/冻结左列和可滚动体的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...

演示：

相关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表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！