一掏缎、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 () {
//生成表格內(nèi)容
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>設(shè)備名稱</th>
<th>設(shè)備類型</th>
<th>故障類型</th>
<th>故障狀態(tài)</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>內(nèi)容</p>
</li>
</ul>
</div>
</body>
</html>
截屏2022-06-29 下午2.38.09.png
