javascript - 如何滚动 "tbody"内的特定区域

标签 javascript jquery html css

enter image description here

我将在橙色阴影区域左右滚动。

我不知道如何应用这项技术。

我想尽可能避免插件。

如果你知道怎么做,请帮助我。

最佳答案

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  <p>Css</p>
    <style>

        table {
            border-collapse:collapse; }

       .long { 
            background:yellow; letter-spacing:1em; }

        div.first1 {
            width: auto;
            height: 150px;           
            padding-bottom: 1px;
            position: absolute;
            left:0;
            top:auto;
        }

        div.second1 {
             width: 600px; 
            overflow-x:scroll;  
            overflow-y:visible;
            margin-left:5em; 
            padding-bottom:1px;
            height:auto;
        }

        .headcol {
            position: absolute;
            width: 5em;
            left: 0;
            top: auto;
            border-right: 0px none black;
            border-top-width: 3px;
            margin-top: -3px;
        }
    </style>
</head>
<body> 
<p>Html</p>
    <div class="first1">
        <div class="second1">
            <table style="border:1px solid black;" border="1">

                    <tr>
                        <td class="headcol">11111111111</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>
                    <tr>
                        <td class="headcol">1</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>
                    <tr>
                        <td class="headcol">1</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>
                    <tr>
                        <td class="headcol">1</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>
                    <tr>
                        <td class="headcol">1</td>
                        <td class="long">22222222222222222222222222222222222222222222</td>
                    </tr>

            </table>
        </div>
    </div>
</body>
</html>

关于javascript - 如何滚动 "tbody"内的特定区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43180297/

相关文章:

javascript - 只允许在文本框中输入范围内的数字

javascript - 如何在表格javascript中每3行添加一行

php - 如果表单中的值为空,如何显示警告消息

javascript - 如何获取JSX输入字段的值到Javascript日期对象,然后将其插入mysql YYYY-MM-DD格式?

javascript - 在运行时使用预先确定的对象分配变量

javascript - 如何使用 jquery 或 javascript 知道当前在元素上运行哪个动画

html - 引导列中的高度问题

jquery - 在选择器之前使用 css

javascript - d3 : disabled "dblclick.zoom" default behaviour returns after using custom zoom

javascript - Function.prototype.bind 的实现