固定table首行或尾行

最新推荐文章于 2023-08-21 15:45:11 发布

烫头喝酒抽烟

最新推荐文章于 2023-08-21 15:45:11 发布

阅读量1.2k

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_44900565/article/details/108770399

版权

效果图：
在这里插入图片描述
合计列不随滚动条滚动而变化

思路：
以尾行举例，把尾行用position:absolute/fixed进行定位到想要的位置，这时候原宽度会发生变化，因为这两个定位会使其脱离文档流（具体网上搜索position详解）

这时，获取tr的每个td的宽度，存进一个数组，然后把定位的td设置成固定宽度
（有个问题，定位的位置如果在table外，那么可能定位好的tr没有table的边框线，ps:1px）
在这里插入图片描述

这种情况就考虑用两个table来实现，步骤几乎一样

代码：（拿两个table举例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resize</title>
    <script src="./EleResize.js"></script>
    <style>
        .nwetavles {
            position: absolute;
            top: 88px;
        }
    </style>
</head>
<body>
<div class="wc" style="height:80px;width:50%;overflow:auto;">
    <table class="newtable" id="qw" border="1px"
           style=" width:50%;border-collapse:collapse;border-spacing: 0;text-align: center" cellspacing="0"
           cellpadding="0">
        <tr>
            <td class="fstd">1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
            <td>5</td>
            <td>5</td>
            <td>5</td>
        </tr>
    </table>
</div>
<table class="nwetavles" border="1px" style="border-collapse:collapse;border-spacing: 0;text-align: center"
       cellspacing="0" cellpadding="0">
    <tr>
        <td>合计</td>
        <td>15</td>
        <td>15</td>
        <td>15</td>
        <td>15</td>
    </tr>
</table>

</body>
<script src="js/jquery-3.2.1.js"></script>
<script>
    //创建数组存放表格第一行所以td的宽度
    var arr = [];
    $(".newtable").find("tr:eq(0)").children().each(function (i, item) {
        console.log("第" + (i + 1) + "的宽度为：" + $(this).width());
        arr.push($(this).width());
    })
    console.log(arr);
    //将新table的td宽度，设置成与原table的一致
    $(".nwetavles").find("tr:eq(0)").children().each(function (i, item) {
        $(this).width(arr[i]);
    })
</script>
</html>

烫头喝酒抽烟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
固定table首行或尾行

效果图：合计列不随滚动条滚动而变化思路：以尾行举例，把尾行用position:absolute/fixed进行定位到想要的位置，这时候原宽度会发生变化，因为这两个定位会使其脱离文档流（具体网上搜索position详解）这时，获取tr的每个td的宽度，存进一个数组，然后把定位的td设置成固定宽度（有个问题，定位的位置如果在table外，那么可能定位好的tr没有table的边框线，ps:1px）这种情况就考虑用两个table来实现，步骤几乎一样代码：（拿两个table举例）<!DOCT
复制链接

扫一扫