使用DIV+CSS实现具有拉宽效果的表格_div嵌套做的表格如何实现拉动改变列宽-CSDN博客

本文链接：https://blog.csdn.net/chai_tian/article/details/121626406

本文介绍了一个使用HTML和CSS实现的动态表格，用户可以通过鼠标操作调整列宽，实现实时响应。着重展示了如何利用CSS和JavaScript进行事件监听和元素定位，以实现边框线拖动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #css_table {
      display:table;
      width: 500px;
    }
    .css_tr {
          display: table-row;
      }
    .css_td {
        min-width: 100px;
        height: 20px;
        display: table-cell;
        border: 1px solid #979797;
        /* word-break:keep-all; */
        white-space:nowrap;/* 不换行 */
    }
    </style>
</head>
<body>
    <div id="css_table">
        <div class="css_tr title" onmousemove="movear(event)" onmouseleave="mleave()">
            <div class="css_td a titleLeft">標題</div>
            <div class="css_td b titlemiddle">回應</div>
            <div class="css_td">日期</div>
        </div>
        <div class="css_tr">
            <div class="css_td">如何停用Wsffgdfsdffd</div>
            <div class="css_td">5</div>
            <div class="css_td">2011-10-30</div>
        </div>
  </div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    // 处理第一条边框线的状态
    var aisDrag = null;
    var aclick = null;
    // 处理第二条边框线的状态
    var bisDrag = null;
    var bclick = null;
    var mouseStatu = null
    // 鼠标移动到边框线范围之后变化样式并获取第一列和第二列td的宽度和offset(left)的总和
    function movear(e) {
        // 第一列
        var atdleft = $('.a').offset();
        var ase = atdleft.left + $('.a').width() - 10;
        var aright = ase + 55;
        // 第二列
        var btdleft = $('.b').offset();
        var bse = btdleft.left + $('.b').width() - 10;
        var bright = bse + 55;
        // 根据鼠标位置来判断当前处于哪一列的边框线
        if (ase < e.pageX && e.pageX < aright) {
            console.log(123);
            // 第一列
            // 让aclick为true触发下面的点击拖动事件
            aclick = true;
            // 更改鼠标的样式
            $('.title').css('cursor', 'e-resize');
        } else if (bse < e.pageX && e.pageX < bright) {
            console.log(456);
            // 第二列
            // 让bclick为true触发下面的点击拖动事件
            bclick = true;
            // 更改鼠标的样式
            $('.title').css('cursor', 'e-resize');
        } else {
            // 如果不在范围内就禁锢状态
            aclick = false;
            bclick = false;
            aisDrag = false;
            bisDrag = false;
            // 鼠标样式还原
            $('.title').css('cursor', 'auto');
        };
    };
    // 通过鼠标按下事件来监听鼠标移动事件
    document.addEventListener('mousedown', function () {
        // 鼠标按下之后mouseStatu为false防止触发mouseleave事件
        mouseStatu=false
        if (aclick) {
            aisDrag = true;
            document.onmousemove = function (a) {
                if (aisDrag) {
                    // 让第一列的宽度等于当前鼠标的offset（left）值
                    var apageX = a.pageX - 10;
                    $('.titleLeft').width(apageX);
                };
            };
        };
        if (bclick) {
            bisDrag = true;
            document.onmousemove = function (a) {
                if (bisDrag) {
                    // 让第二列的宽度等于当前鼠标的offset（left）值减去第一列的宽度
                    var bpageX = a.pageX - $('.titleLeft').width();
                    $('.titlemiddle').width(bpageX -10);
                };
            };
        }
    });
    // 鼠标松开之后让所有状态为false
    document.addEventListener('mouseup', function () {
        // 鼠标松开之后让mouseStatu为true 触发离开事件清除状态
        mouseStatu=true
        aclick = false;
        aisDrag = false;
        bisDrag = false;;
        bclick = false;
    });
    // 鼠标离开之后再次清空状态 防止出现拖动完第二列的表格之后，点击别处仍然可以触发一次鼠标拖动第二列的BUG
    function mleave(params) {
        if(mouseStatu){
            aclick = false;
            aisDrag = false;
            bisDrag = false;
            bclick = false;
        }
        
    };
</script>
</html>