html具有固定行和列的表(代码片段)

author author     2022-12-31     791

关键词:

<!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>

使用 django html 模板创建具有动态行和列的表

】使用djangohtml模板创建具有动态行和列的表【英文标题】:createtablewithdynamicrowsandcolumnswithdjangohtmltemplate【发布时间】:2018-07-2220:01:03【问题描述】:我正在尝试使用djangohtml模板根据结果列表创建具有动态行和列的表。记录数和... 查看详情

将带有html标签的列值转换为带有行和列的sql视图

】将带有html标签的列值转换为带有行和列的sql视图【英文标题】:Convertcolumnvaluewithhtmltagsintosqlviewwithrowsandcolumns【发布时间】:2020-07-1706:57:05【问题描述】:我有一个名为data的表,其中包含desc_data列。该列的值如下:<spanclass=... 查看详情

b_lc_给定行和列的和求可行矩阵(找行和列的和的最小值填)(代码片段)

给定rowSum[i]是二维矩阵中第i行元素的和,colSum[j]是第j列元素的和请找到大小为rowSum.lengthxcolSum.length的任意非负整数矩阵,且该矩阵满足rowSum和colSum的要求。思路我是这样想的:越先找到越小的值填了的容错能力更强!classSolution... 查看详情

在 pandas 中,如何在具有匹配行和列的 3 个单独数据帧之间建立相关矩阵?

】在pandas中,如何在具有匹配行和列的3个单独数据帧之间建立相关矩阵?【英文标题】:Inpandas,howdoyoumakeacorrelationmatrixbetween3separatedataframeswithmatchingrowsandcolumns?【发布时间】:2020-12-2514:39:12【问题描述】:每个数据框都有基因名... 查看详情

在纯 CSS 上具有固定标题和固定列的表

】在纯CSS上具有固定标题和固定列的表【英文标题】:Tablewithfixedheaderandfixedcolumnonpurecss【发布时间】:2013-03-2613:17:18【问题描述】:我需要创建一个带有固定标题和固定第一列的html表格(或类似的外观)。目前我看到的每个解... 查看详情

需要 VBA 代码来检索特定行和列的 sumproduct [关闭]

】需要VBA代码来检索特定行和列的sumproduct[关闭]【英文标题】:NeedVBAcodethatretrievessumproductofparticularrowsandcolumns[closed]【发布时间】:2022-01-1206:06:10【问题描述】:我想知道是否有人可以为我编写一个VBA代码来检索特定单元格和列... 查看详情

具有 1 个元素的行和列

】具有1个元素的行和列【英文标题】:rowandcolumnswith1element【发布时间】:2021-12-2413:32:47【问题描述】:对于此处给出的示例:https://quasar.dev/layout/grid/gutter#pros-cons-and-how-to-workaround-problems-q-gutter-size-vs-q-col-gutter-size我可以知道吗... 查看详情

编写一段代码,打印一个m行n列的二维数组转置。(交换行和列)(代码片段)

importedu.princeton.cs.algs4.*;publicclassNo_1_1_13publicstaticvoidmain(String[]args)intm=4;intn=3;int[][]a=newint[m][n];for(inti=0;i<m;i++)for(intj=0;j<n;j++)a[i][j]=i+j;StdOut.print(a[i][j 查看详情

09-----视图(代码片段)

一、视图的定义视图是虚拟表或逻辑表,它被定义为具有连接的SQLSELECT查询语句。因为数据库视图与数据库表类似,它由行和列组成,因此可以根据数据库表查询数据。其内容由查询定义。但是,视图并不在数据库中以存储的数... 查看详情

c语言将一个二维数组行和列的元素互换,存到另一个二维数组中(代码片段)

例如:#include<stdio.h>intmain() inta[2][3]=1,2,3,4,5,6; intb[3][2],i,j; printf("arraya:\\n"); for(i=0;i<=1;i++)//处理a数组中的一行中各元素 for(j=0;j<=2;j+ 查看详情

如何为超过 3000 万行和 250 列的表优化 Oracle 创建表功能

...布时间】:2019-05-3008:59:28【问题描述】:我需要从另一个具有相同行号和大约230列的表中创建一个具有超过3000万行和大约250列的表。这就像ETL过程。我使用SPSSMod 查看详情

寻找二维数组中唯一的行和列的索引,以及这些位置上元素的最小和。(代码片段)

...应该找到5个元素的最小和,其中每个元素应该是唯一的行和列,并打印这些元素的索引和最小和。这个问题给出了3个测试案例作为例子。测试用例1:测试用例2:测试用例3:测试用例45,4,4,1,6,1,3,2,4,6,3,2,3,2,6,0,4,5,4,6,(6,6,6,6,6;Output... 查看详情

pandasdataframe-向量化运算(代码片段)

pandasDataFrame进行向量化运算时,是根据行和列的索引值进行计算的,而不是行和列的位置:1.行和列索引一致:importpandasaspddf1=pd.DataFrame(‘a‘:[1,2,3],‘b‘:[4,5,6],‘c‘:[7,8,9])df2=pd.DataFrame(‘a‘:[10,20,30],‘b‘:[40,50,60],‘c‘:[70,80,90])print 查看详情

调整大小以适应 QTableView 中的行和列非常慢

】调整大小以适应QTableView中的行和列非常慢【英文标题】:SizingtofitrowsandcolumnsinaQTableViewisveryslow【发布时间】:2011-11-2005:53:32【问题描述】:我有一个带有自定义模型的QTableView,它工作正常。但是,当我启动程序时,我希望行... 查看详情

选定行和列的 Pandas min()

】选定行和列的Pandasmin()【英文标题】:Pandasmin()ofselectedrowandcolumns【发布时间】:2014-10-1805:33:24【问题描述】:我正在尝试创建一个仅包含一行和几列中的最小值的列,例如:A0A1A2B0B1B2C0C100.840.470.550.460.760.420.240.7510.430.470.930.390.5... 查看详情

透视具有一个标题行和一个数据行的表

】透视具有一个标题行和一个数据行的表【英文标题】:Pivotatablewithoneheaderrowandonedatarow【发布时间】:2019-04-0322:54:16【问题描述】:附加的代码会生成一个包含一行十二列的简单表格。我的目标是将最终结果转为显示12行和两列... 查看详情

具有动态列的表布局固定和整行 colspan

】具有动态列的表布局固定和整行colspan【英文标题】:Table-layoutfixedandfullrowcolspanwithdynamiccolumns【发布时间】:2017-07-0900:11:12【问题描述】:我试图设置表格列的宽度,但我注意到当它在FF中工作时,它在Chrome/Edge中被完全忽略。... 查看详情

cssflexbox行和列css(代码片段)

查看详情