html 具有固定行和列的表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 具有固定行和列的表相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="../jquery.min.js"></script>
<title>Document</title>
<style>
.pri-matrix table {
background-color: white;
width: auto;
}
.pri-matrix table tr td,
.pri-matrix table tr th {
min-width: 100px;
width: 100px;
min-height: 20px;
height: 20px;
padding: 5px;
text-align: center;
}
.pri-matrix-header {
width: calc(100% - 140px);
height: 30px;
margin-left: 110px;
overflow: hidden;
border-bottom: 1px solid #CCC;
/* position: fixed; */
}
.pri-matrix-sidebar {
width: 110px;
height: 290px;
float: left;
overflow: hidden;
border-right: 1px solid #CCC;
/* margin-top: 30px; */
}
.pri-matrix-body {
overflow: auto;
width: calc(100% - 120px);
height: 310px;
float: left;
/* margin-top: 30px; */
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<div class="pri-matrix" id="pri-matrix">
<header class="pri-matrix-header">
<table class="">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eigh</th>
<th>Nine</th>
<th>Ten</th>
<th>Eleven</th>
<th>Twelve</th>
<th>Thirteen</th>
<th>Fourteen</th>
<th>Fifteen</th>
<th>Sixteen</th>
<th>Seventeen</th>
<th>Eighteen</th>
<th>Nineteen</th>
<th>Twenty</th>
</tr>
</thead>
</table>
</header>
<aside class="pri-matrix-sidebar">
<table class="">
<tbody>
<tr>
<td>LeftOne</td>
</tr>
<tr>
<td>LeftTwo</td>
</tr>
<tr>
<td>LeftThree</td>
</tr>
<tr>
<td>LeftFour</td>
</tr>
<tr>
<td>LeftFive</td>
</tr>
<tr>
<td>LeftSix</td>
</tr>
<tr>
<td>LeftSeven</td>
</tr>
<tr>
<td>LeftEight</td>
</tr>
<tr>
<td>LeftNine</td>
</tr>
<tr>
<td>LeftTen</td>
</tr>
<tr>
<td>LeftEleven</td>
</tr>
<tr>
<td>LeftTwelve</td>
</tr>
<tr>
<td>LeftThirteen</td>
</tr>
<tr>
<td>LeftFourteen</td>
</tr>
<tr>
<td>LeftFifteen</td>
</tr>
<tr>
<td>LeftSixteen</td>
</tr>
<tr>
<td>LeftSeventeen</td>
</tr>
<tr>
<td>LeftEighteen</td>
</tr>
<tr>
<td>LeftNineteen</td>
</tr>
<tr>
<td>LeftTwenty</td>
</tr>
</tbody>
</table>
</aside>
<div class="pri-matrix-body">
<table class="">
<tbody>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
<td>a5</td>
<td>a6</td>
<td>a7</td>
<td>a8</td>
<td>a9</td>
<td>a10</td>
<td>a11</td>
<td>a12</td>
<td>a13</td>
<td>a14</td>
<td>a15</td>
<td>a16</td>
<td>a17</td>
<td>a18</td>
<td>a19</td>
<td>a20</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
<td>b5</td>
<td>b6</td>
<td>b7</td>
<td>b8</td>
<td>b9</td>
<td>b10</td>
<td>b11</td>
<td>b12</td>
<td>b13</td>
<td>b14</td>
<td>b15</td>
<td>b16</td>
<td>b17</td>
<td>b18</td>
<td>b19</td>
<td>b20</td>
</tr>
<tr>
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>c4</td>
<td>c5</td>
<td>c6</td>
<td>c7</td>
<td>c8</td>
<td>c9</td>
<td>c10</td>
<td>c11</td>
<td>c12</td>
<td>c13</td>
<td>c14</td>
<td>c15</td>
<td>c16</td>
<td>c17</td>
<td>c18</td>
<td>c19</td>
<td>c20</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
<td>d6</td>
<td>d7</td>
<td>d8</td>
<td>d9</td>
<td>d10</td>
<td>d11</td>
<td>d12</td>
<td>d13</td>
<td>d14</td>
<td>d15</td>
<td>d16</td>
<td>d17</td>
<td>d18</td>
<td>d19</td>
<td>d20</td>
</tr>
<tr>
<td>e1</td>
<td>e2</td>
<td>e3</td>
<td>e4</td>
<td>e5</td>
<td>e6</td>
<td>e7</td>
<td>e8</td>
<td>e9</td>
<td>e10</td>
<td>e11</td>
<td>e12</td>
<td>e13</td>
<td>e14</td>
<td>e15</td>
<td>e16</td>
<td>e17</td>
<td>e18</td>
<td>e19</td>
<td>e20</td>
</tr>
<tr>
<td>f1</td>
<td>f2</td>
<td>f3</td>
<td>f4</td>
<td>f5</td>
<td>f6</td>
<td>f7</td>
<td>f8</td>
<td>f9</td>
<td>f10</td>
<td>f11</td>
<td>f12</td>
<td>f13</td>
<td>f14</td>
<td>f15</td>
<td>f16</td>
<td>f17</td>
<td>f18</td>
<td>f19</td>
<td>f20</td>
</tr>
<tr>
<td>g1</td>
<td>g2</td>
<td>g3</td>
<td>g4</td>
<td>g5</td>
<td>g6</td>
<td>g7</td>
<td>g8</td>
<td>g9</td>
<td>g10</td>
<td>g11</td>
<td>g12</td>
<td>g13</td>
<td>g14</td>
<td>g15</td>
<td>g16</td>
<td>g17</td>
<td>g18</td>
<td>g19</td>
<td>g20</td>
</tr>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
<td>h4</td>
<td>h5</td>
<td>h6</td>
<td>h7</td>
<td>h8</td>
<td>h9</td>
<td>h10</td>
<td>h11</td>
<td>h12</td>
<td>h13</td>
<td>h14</td>
<td>h15</td>
<td>h16</td>
<td>h17</td>
<td>h18</td>
<td>h19</td>
<td>h20</td>
</tr>
<tr>
<td>i1</td>
<td>i2</td>
<td>i3</td>
<td>i4</td>
<td>i5</td>
<td>i6</td>
<td>i7</td>
<td>i8</td>
<td>i9</td>
<td>i10</td>
<td>i11</td>
<td>i12</td>
<td>i13</td>
<td>i14</td>
<td>i15</td>
<td>i16</td>
<td>i17</td>
<td>i18</td>
<td>i19</td>
<td>i20</td>
</tr>
<tr>
<td>j1</td>
<td>j2</td>
<td>j3</td>
<td>j4</td>
<td>j5</td>
<td>j6</td>
<td>j7</td>
<td>j8</td>
<td>j9</td>
<td>j10</td>
<td>j11</td>
<td>j12</td>
<td>j13</td>
<td>j14</td>
<td>j15</td>
<td>j16</td>
<td>j17</td>
<td>j18</td>
<td>j19</td>
<td>j20</td>
</tr>
<tr>
<td>k1</td>
<td>k2</td>
<td>k3</td>
<td>k4</td>
<td>k5</td>
<td>k6</td>
<td>k7</td>
<td>k8</td>
<td>k9</td>
<td>k10</td>
<td>k11</td>
<td>k12</td>
<td>k13</td>
<td>k14</td>
<td>k15</td>
<td>k16</td>
<td>k17</td>
<td>k18</td>
<td>k19</td>
<td>k20</td>
</tr>
<tr>
<td>l1</td>
<td>l2</td>
<td>l3</td>
<td>l4</td>
<td>l5</td>
<td>l6</td>
<td>l7</td>
<td>l8</td>
<td>l9</td>
<td>l10</td>
<td>l11</td>
<td>l12</td>
<td>l13</td>
<td>l14</td>
<td>l15</td>
<td>l16</td>
<td>l17</td>
<td>l18</td>
<td>l19</td>
<td>l20</td>
</tr>
<tr>
<td>m1</td>
<td>m2</td>
<td>m3</td>
<td>m4</td>
<td>m5</td>
<td>m6</td>
<td>m7</td>
<td>m8</td>
<td>m9</td>
<td>m10</td>
<td>m11</td>
<td>m12</td>
<td>m13</td>
<td>m14</td>
<td>m15</td>
<td>m16</td>
<td>m17</td>
<td>m18</td>
<td>m19</td>
<td>m20</td>
</tr>
<tr>
<td>n1</td>
<td>n2</td>
<td>n3</td>
<td>n4</td>
<td>n5</td>
<td>n6</td>
<td>n7</td>
<td>n8</td>
<td>n9</td>
<td>n10</td>
<td>n11</td>
<td>n12</td>
<td>n13</td>
<td>n14</td>
<td>n15</td>
<td>n16</td>
<td>n17</td>
<td>n18</td>
<td>n19</td>
<td>n20</td>
</tr>
<tr>
<td>o1</td>
<td>o2</td>
<td>o3</td>
<td>o4</td>
<td>o5</td>
<td>o6</td>
<td>o7</td>
<td>o8</td>
<td>o9</td>
<td>o10</td>
<td>o11</td>
<td>o12</td>
<td>o13</td>
<td>o14</td>
<td>o15</td>
<td>o16</td>
<td>o17</td>
<td>o18</td>
<td>o19</td>
<td>o20</td>
</tr>
<tr>
<td>p1</td>
<td>p2</td>
<td>p3</td>
<td>p4</td>
<td>p5</td>
<td>p6</td>
<td>p7</td>
<td>p8</td>
<td>p9</td>
<td>p10</td>
<td>p11</td>
<td>p12</td>
<td>p13</td>
<td>p14</td>
<td>p15</td>
<td>p16</td>
<td>p17</td>
<td>p18</td>
<td>p19</td>
<td>p20</td>
</tr>
<tr>
<td>q1</td>
<td>q2</td>
<td>q3</td>
<td>q4</td>
<td>q5</td>
<td>q6</td>
<td>q7</td>
<td>q8</td>
<td>q9</td>
<td>q10</td>
<td>q11</td>
<td>q12</td>
<td>q13</td>
<td>q14</td>
<td>q15</td>
<td>q16</td>
<td>q17</td>
<td>q18</td>
<td>q19</td>
<td>q20</td>
</tr>
<tr>
<td>r1</td>
<td>r2</td>
<td>r3</td>
<td>r4</td>
<td>r5</td>
<td>r6</td>
<td>r7</td>
<td>r8</td>
<td>r9</td>
<td>r10</td>
<td>r11</td>
<td>r12</td>
<td>r13</td>
<td>r14</td>
<td>r15</td>
<td>r16</td>
<td>r17</td>
<td>r18</td>
<td>r19</td>
<td>r20</td>
</tr>
<tr>
<td>s1</td>
<td>s2</td>
<td>s3</td>
<td>s4</td>
<td>s5</td>
<td>s6</td>
<td>s7</td>
<td>s8</td>
<td>s9</td>
<td>s10</td>
<td>s11</td>
<td>s12</td>
<td>s13</td>
<td>s14</td>
<td>s15</td>
<td>s16</td>
<td>s17</td>
<td>s18</td>
<td>s19</td>
<td>s20</td>
</tr>
<tr>
<td>t1</td>
<td>t2</td>
<td>t3</td>
<td>t4</td>
<td>t5</td>
<td>t6</td>
<td>t7</td>
<td>t8</td>
<td>t9</td>
<td>t10</td>
<td>t11</td>
<td>t12</td>
<td>t13</td>
<td>t14</td>
<td>t15</td>
<td>t16</td>
<td>t17</td>
<td>t18</td>
<td>t19</td>
<td>t20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
var priMatrixScroll = function (el) {
var $body, $header, $sidebar;
$body = $(el).find('.pri-matrix-body');
$sidebar = $(el).find('.pri-matrix-sidebar table');
$header = $(el).find('.pri-matrix-header table');
return $($body).scroll(function () {
console.log('margin-top', -$($body).scrollTop());
$($sidebar).css('margin-top', -$($body).scrollTop());
console.log('margin-left', -$($body).scrollLeft())
return $($header).css('margin-left', -$($body).scrollLeft());
});
};
var priMatrixScrTable = new priMatrixScroll($('#pri-matrix'));
</script>
</body>
</html>以上是关于html 具有固定行和列的表的主要内容，如果未能解决你的问题，请参考以下文章