如何创建一个左右有粘性列且中间的正文可滚动的表格？

问题描述 投票：0回答：1

我已经在一段代码上工作了几个小时，试图实现所需的表格布局。然而，每次我对代码进行调整时，都会导致表格扭曲或表现异常。我的目标是让滚动条仅针对表格内的可滚动内容出现，而不针对整个表格本身。此外，我希望滚动条专门位于可滚动内容区域的底部。

请帮我解决这个问题。谢谢你哟！

.table-scroll {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: auto;
  height: 50vh;
  width: 1000px;
}

.table-scroll table {
  width: 100%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid #000;
  background: #fff;
  vertical-align: top;
  text-align: center;
}

.table-scroll thead th {
  background: #333;
  color: #fff;
  top: 0;
  z-index: 1;
}

th.sticky-left,
td.sticky-left {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 4;
  background: #ccc;
}

th.sticky-left:nth-child(2),
td.sticky-left:nth-child(2) {
  position: -webkit-sticky;
  position: sticky;
  left: 70px;
  z-index: 10;
  background: #ccc;
}

th.sticky-right,
td.sticky-right {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 4;
  background: #ccc;
}
<div class="table-scroll">
    <table border="1">
      <thead>
        <tr>
          <th class="sticky-left w-32" rowspan="2">DATE</th>
          <th class="sticky-left w-32" rowspan="2">DATE2</th>
          <th colspan="10">LINE 1</th>
          <th colspan="10">LINE 2</th>

          <th class="sticky-right" rowspan="2">LINE 3</th>
        </tr>
        <tr>
          <th>SENSOR 1</th>
          <th>SENSOR 2</th>
          <th>SENSOR 3</th>
          <th>SENSOR 4</th>
          <th>SENSOR 5</th>
          <th>SENSOR 6</th>
          <th>SENSOR 7</th>
          <th>SENSOR 8</th>
          <th>SENSOR 9</th>
          <th>SENSOR 10</th>
          <th>SENSOR 1</th>
          <th>SENSOR 2</th>
          <th>SENSOR 3</th>
          <th>SENSOR 4</th>
          <th>SENSOR 5</th>
          <th>SENSOR 6</th>
          <th>SENSOR 7</th>
          <th>SENSOR 8</th>
          <th>SENSOR 9</th>
          <th>SENSOR 10</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="sticky-left w-32">VALUE 1</td>
          <td class="sticky-left w-32">VALUE 1</td>
          <td>SENSOR DATA 1</td>
          <td>SENSOR DATA 2</td>
          <td>SENSOR DATA 3</td>
          <td>SENSOR DATA 4</td>
          <td>SENSOR DATA 5</td>
          <td>SENSOR DATA 6</td>
          <td>SENSOR DATA 7</td>
          <td>SENSOR DATA 8</td>
          <td>SENSOR DATA 9</td>
          <td>SENSOR DATA 10</td>
          <td>SENSOR DATA 1</td>
          <td>SENSOR DATA 2</td>
          <td>SENSOR DATA 3</td>
          <td>SENSOR DATA 4</td>
          <td>SENSOR DATA 5</td>
          <td>SENSOR DATA 6</td>
          <td>SENSOR DATA 7</td>
          <td>SENSOR DATA 8</td>
          <td>SENSOR DATA 9</td>
          <td>SENSOR DATA 10</td>
          <td class="sticky-right">VALUE 1</td>
        </tr>
        <tr>
          <td class="sticky-left w-32">VALUE 2</td>
          <td class="sticky-left w-32">VALUE 2</td>
          <td>SENSOR DATA 1</td>
          <td>SENSOR DATA 2</td>
          <td>SENSOR DATA 3</td>
          <td>SENSOR DATA 4</td>
          <td>SENSOR DATA 5</td>
          <td>SENSOR DATA 6</td>
          <td>SENSOR DATA 7</td>
          <td>SENSOR DATA 8</td>
          <td>SENSOR DATA 9</td>
          <td>SENSOR DATA 10</td>
          <td>SENSOR DATA 1</td>
          <td>SENSOR DATA 2</td>
          <td>SENSOR DATA 3</td>
          <td>SENSOR DATA 4</td>
          <td>SENSOR DATA 5</td>
          <td>SENSOR DATA 6</td>
          <td>SENSOR DATA 7</td>
          <td>SENSOR DATA 8</td>
          <td>SENSOR DATA 9</td>
          <td>SENSOR DATA 10</td>
          <td class="sticky-right">VALUE 2</td>
        </tr>
        <tr>
          <td class="sticky-left w-32">VALUE 1</td>
          <td class="sticky-left w-32">VALUE 1</td>
          <td>SENSOR DATA 1</td>
          <td>SENSOR DATA 2</td>
          <td>SENSOR DATA 3</td>
          <td>SENSOR DATA 4</td>
          <td>SENSOR DATA 5</td>
          <td>SENSOR DATA 6</td>
          <td>SENSOR DATA 7</td>
          <td>SENSOR DATA 8</td>
          <td>SENSOR DATA 9</td>
          <td>SENSOR DATA 10</td>
          <td>SENSOR DATA 1</td>
          <td>SENSOR DATA 2</td>
          <td>SENSOR DATA 3</td>
          <td>SENSOR DATA 4</td>
          <td>SENSOR DATA 5</td>
          <td>SENSOR DATA 6</td>
          <td>SENSOR DATA 7</td>
          <td>SENSOR DATA 8</td>
          <td>SENSOR DATA 9</td>
          <td>SENSOR DATA 10</td>
          <td class="sticky-right">VALUE 1</td>
        </tr>
      </tbody>
    </table>
  </div>

html css html-table
1个回答
0
投票

嵌套
<table>
s

  1. 主

    <table>
    有一个
    <thead>
    ，其中包含一个隐藏的
    <tr class="collapsed">
    ，其样式为
    visibility: collapse
    。 
    tr.collapsed
    内有 22 个 
    <th>
    ，每个宽度为 50 像素。这个隐藏 
    <tr>
    的目的是为中间 
    <td>
    建立列以引用它的 
    [colspan="20"]
    属性/值。

  2. 接下来，将包含 3 个 

    <tr>
    的 
    <td>
    添加到主 
    <table>
    的 
    <tbody>
    中。到目前为止的布局：

    行距=“4” colspan =“20”rowspan =“4” 行距=“4”

  3. 然后在第一个和最后一个

    <table>
    内部添加一个
    <td>
    ，并给它们一个
    <thead>
    ，添加一个
    <tr>
    和一个
    <th>
    。之后添加一个 
    <tbody>
    ，然后添加 3 个 
    <tr>
    ，每个包含一个 
    <td>
    或 
    <th>
    。

  4. 现在为中间的 

    <td>
    添加一个 
    <table>
    ，其中 
    <thead>
    包含 20 个 
    <th>
    。然后添加 3 个 
    <tr>
    ，每个包含 20 个 
    <td>
    。布局应该如下所示：

    行距=“4” colspan =“20”rowspan =“4” 行距=“4”

  5. 接下来，将 

    position: sticky
    添加到主 
    <td>
    的第一个和最后一个 
    <table>
    。最后，将 
    left: 0
    分配给第一个 
    <td>
    ，将 
    right: 0
    分配给最后一个 
    <td>
    。

:root {
  font: 2ch/1.2 Consolas;
}

table {
  table-layout: fixed;
  border-collapse: collapsed;
}

table,
th,
td {
  border: 1.51515px groove rgb(128, 128, 128);
  background: #eee;
}

th,
td {
  padding: 5px
}

th {
  background: rgb(99, 99, 99)
}

td {
  text-align: center;
}

.collapsed {
  visibility: collapse
}

.collapsed th {
  width: 50px
}

.fixed {
  position: sticky
}

.fixed:first-child {
  left: 0
}

.fixed:last-child {
  right: 0;
}
<table>
  <thead>
    <tr class="collapsed">
      <th></th><th></th><th></th>
      <th></th><th></th><th></th>
      <th></th><th></th><th></th>
      <th></th><th></th><th></th>
      <th></th><th></th><th></th>
      <th></th><th></th><th></th>
      <th></th><th></th><th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4" class="fixed">
        <table>
          <thead>
            <tr><th>COL01</th></tr>
          </thead>
          <tbody>
            <tr><th>ROW01</th></tr>
            <tr><th>ROW02</th></tr>
            <tr><th>ROW03</th></tr>
          </tbody>
        </table>
      </td>
      <td colspan="20" rowspan="4">
        <table>
          <thead>
            <tr>
              <th>COL02</th><th>COL03</th>
              <th>COL04</th><th>COL05</th>
              <th>COL06</th><th>COL07</th>
              <th>COL08</th><th>COL09</th>
              <th>COL10</th><th>COL11</th>
              <th>COL12</th><th>COL13</th>
              <th>COL14</th><th>COL15</th>
              <th>COL16</th><th>COL17</th>
              <th>COL18</th><th>COL19</th>
              <th>COL20</th><th>COL21</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
            </tr>
            <tr>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
            </tr>
            <tr>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
              <td>DATA</td><td>DATA</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td rowspan="4" class="fixed">
        <table>
          <thead>
            <tr><th>COL22</th></tr>
          </thead>
          <tbody>
            <tr><th>ROW01</th></tr>
            <tr><th>ROW02</th></tr>
            <tr><th>ROW03</th></tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.