一、table

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
            border-spacing: 0;
        }

        table td {
            word-break: break-all;
            word-wrap: break-word;
        }

        .container {
            width: 600px;
            height: 500px;
            padding: 0;
            box-sizing: border-box;
        }

        #left-div {
            width: 80px;
            float: left;
        }

        #left-div1 {
            width: 100%;
        }

        #left-div2 {
            width: 100%;
            height: 250px;
            overflow: hidden;
        }

        #left-table2 {
            margin-bottom: 4px;
        }

        #right-div {
            float: left;
            width: 240px;
        }

        #right-div1 {
            width: 100%;
            overflow: hidden;
        }

        #right-div2 {
            width: 100%;
            height: 250px;
            overflow: auto;
        }

        #right-table1 {
            width: 320px;
        }

        #right-table2 {
            width: 320px;
            overflow: auto;
        }

        th,
        td {
            height: 50px;
            width: 80px;
            line-height: 50px;
            overflow: hidden;
            text-align: center;
        }

        th {
            color: #1E304F;
            background-color: #F3F8FF;
        }

        td {
            color: #384967;
        }

        tr:nth-of-type(odd) {
            background: #E7F2FF;
        }

        /*可以美化一下滚动条*/
        #right-div2::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 4px;
            height: 4px;
        }

        #right-div2::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }

        #right-div2::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //生成表格内容
            let htmlLeft = '';
            let htmlRight = '';
            for (let i = 1; i <= 7; i++) {
                htmlLeft += '<tr>';
                htmlLeft += '<td>' + i + '</td>';
                htmlLeft += '</tr>';
            }
            for (let i = 1; i <= 7; i++) {
                htmlRight += '<tr>';
                htmlRight += '<td>A</td>';
                htmlRight += '<td>100</td>';
                htmlRight += '<td>500</td>';
                htmlRight += '<td>1</td>';
                htmlRight += '</tr>';
            }
            $('#left-table2').html(htmlLeft);
            $('#right-table2').html(htmlRight);
            //滚动
            $('#right-div2').on('scroll', function () {
                let top = $(this).scrollTop();
                let left = $(this).scrollLeft();
                $('#left-div2').scrollTop(top);
                $('#right-div1').scrollLeft(left);
            })
        });
    </script>
</head>

<body>
    <div class="container">
        <div id="left-div">
            <div id="left-div1">
                <table>
                    <tr>
                        <th>编号</th>
                    </tr>
                </table>
            </div>
            <div id="left-div2">
                <table id="left-table2"></table>
            </div>
        </div>
        <div id="right-div">
            <div id="right-div1">
                <table id="right-table1">
                    <tr>
                        <th>设备名称</th>
                        <th>设备类型</th>
                        <th>故障类型</th>
                        <th>故障状态</th>
                    </tr>
                </table>
            </div>
            <div id="right-div2">
                <table id="right-table2"></table>
            </div>
        </div>
    </div>
</body>

</html>

截屏2022-06-29 下午2.39.07.png

二、div布局

      <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
      ul,
      li {
        list-style: none;
      }
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 300px;
        height: 300px;
        display: flex;
        overflow: hidden;
        border: 1px solid red;
      }
      .box-left {
        width: 40px;
      }
      .left-top {
        width: 100%;
        height: 40px;
        overflow: hidden;
      }
      .left-bottom {
        width: 100%;
        height: calc(100% - 40px);
        overflow: hidden;
      }
      .left-bottom > p {
        width: 100%;
        height: 600px;
        background-color: aquamarine;
      }
      .box-right {
        width: calc(100% - 40px);
      }
      .right-top {
        width: 100%;
        height: 40px;
        overflow: hidden;
      }
      .right-top > p {
        width: 600px;
        height: 100%;
        background-color: darksalmon;
      }
      .right-bottom {
        width: 100%;
        height: calc(100% - 40px);
        overflow: auto;
      }
      .right-bottom p {
        width: 600px;
        height: 600px;
        background-color: yellowgreen;
      }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
      $(function () {
        //滚动
        $('.right-bottom').on('scroll', function () {
          let top = $(this).scrollTop()
          let left = $(this).scrollLeft()
          $('.left-bottom').scrollTop(top)
          $('.right-top').scrollLeft(left)
        })
      })
    </script>
  </head>

  <body>
    <div class="box">
      <ul class="box-left">
        <li class="left-top" />
        <li class="left-bottom">
          <p>首列</p>
        </li>
      </ul>
      <ul class="box-right">
        <li class="right-top">
          <p>头</p>
        </li>
        <li class="right-bottom">
          <p>内容</p>
        </li>
      </ul>
    </div>
  </body>
</html>

截屏2022-06-29 下午2.38.09.png