这是两个想法

Question

我有一个由div组成的表，使用表css将其设置为表格格式。我想在行内部用绝对定位的div锁定一行。但是当我这样做时，这个位置是：相对的;在行上设置不受尊重。

这是我的表，没有试图锁定行。

jsfiddle table without locked row

当我将行锁定器div设置为display：block时。它彻底突破了表格行。

（运行时代码如下; stackoverflow不允许我发布第三个链接）

当我将divRow类设置为display：block而不是display：table-row;行阻塞div位于正确的位置（我想要的），但是当我失去表行属性（我不想要的）时，所有列都被推到左边。

jsfiddle with divRow set to block

以下是我用于生成这些结果的代码。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .divTable{
          display:table;         
          width:auto;
          position: relative;              
        }
        .divRow{
          display:table-row;
          width:auto;
          clear:both;
          position: relative;
          overflow: hidden;
        }
        .divCell{
          display:table-cell;
          padding: 3px;        
          vertical-align: top;
          position: relative;
        }
        .locked_row
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="main_content">
        <div class="divTable">
            <div class="divRow" style="background-color: rgb(255, 255, 255);">
                <div class="divCell"><span>id: 234</span></div>
                <div class="divCell"><span>johnDoe23</span></div>
                <div class="divCell"><span>John</span></div>
                <div class="divCell"><span>Doe</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(221, 221, 221);">
                <div class="divCell"><span>id: 832</span></div>
                <div class="divCell"><span>janeDoe288</span></div>
                <div class="divCell"><span>Jane</span></div>
                <div class="divCell"><span>Doe</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(255, 255, 255);">
                <div class="divCell"><span>id: 234</span></div>
                <div class="divCell"><span>johnDoe23</span></div>
                <div class="divCell"><span>John</span></div>
                <div class="divCell"><span>Doe</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(221, 221, 221);">
                <div class="divCell"><span>id: 832</span></div>
                <div class="divCell"><span>janeDoe288</span></div>
                <div class="divCell"><span>Jane</span></div>
                <div class="divCell"><span>Doe</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(255, 255, 255);">
                <div class="divCell"><span>id: 234</span></div>
                <div class="divCell"><span>johnDoe23</span></div>
                <div class="divCell"><span>John</span></div>
                <div class="divCell"><span>Doe</span></div>
                <div class='locked_row'><span>This row is locked</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(221, 221, 221);">
                <div class="divCell"><span>id: 832</span></div>
                <div class="divCell"><span>janeDoe288</span></div>
                <div class="divCell"><span>Jane</span></div>
                <div class="divCell"><span>Some other long data in a row</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(255, 255, 255);">
                <div class="divCell"><span>id: 234</span></div>
                <div class="divCell"><span>johnDoe23</span></div>
                <div class="divCell"><span>John</span></div>
                <div class="divCell"><span>Doe</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(221, 221, 221);">
                <div class="divCell"><span>id: 83223425</span></div>
                <div class="divCell"><span>janeDoe288</span></div>
                <div class="divCell"><span>Really Long user name</span></div>
                <div class="divCell"><span>Doe</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(255, 255, 255);">
                <div class="divCell"><span>id: 234</span></div>
                <div class="divCell"><span>johnDoe23</span></div>
                <div class="divCell"><span>John</span></div>
                <div class="divCell"><span>Doe</span></div>
            </div>
            <div class="divRow" style="background-color: rgb(221, 221, 221);">
                <div class="divCell"><span>id: 832</span></div>
                <div class="divCell"><span>janeDoe288</span></div>
                <div class="divCell"><span>Jane</span></div>
                <div class="divCell"><span>Doe</span></div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

这是两个想法

＃1 - 删除单元格的文本和颜色背景（最简单）

使用text-indent: -9999px
使用单元格的position: absolute伪元素提供“已锁定”文本。 left: 9999px将文本拉回到此元素的视口中。
单元格为position: relative

工作示例

.divTable {
  display: table;
  width: auto;
}
.divRow {
  display: table-row;
  width: auto;
  clear: both;
  overflow: hidden;
}
.divCell {
  display: table-cell;
  padding: 3px;
  vertical-align: top;
}
.divRow:nth-child(even) {
  background-color: rgb(221, 221, 221);
}
.divRow:nth-child(odd) {
  background-color: rgb(255, 255, 255);
}
.lockedRow > div {
  background: #F00;
  text-indent: -9999px;
  position: relative;
}
.lockedRow > div:first-child:after {
  content: 'Locked Row';
  display: block;
  position: absolute;
  left: 9999px;
  top: 0;
  }

<div id="main_content">
  <div class="divTable">
    <div class="divRow lockedRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 832</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Jane</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow lockedRow">
      <div class="divCell"><span>id: 832</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Jane</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 832</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Jane</span>
      </div>
      <div class="divCell"><span>Some other long data in a row</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 83223425</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Really Long user name</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 832</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Jane</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
  </div>
</div>

＃2 - 重叠行

这个想法似乎适用于每个“细胞”的孩子。

将锁定的类应用于该行，然后创建一个伪元素.divCell的锁定叠加层，如下所示：

.lockedRow > div:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

锁定行的单元格位于相对位置：

.lockedRow > div {
  position: relative;
}

锁定的消息可以通过第一个单元格给出：

.lockedRow > div:first-child:after {
  content: 'Locked Row';
}

此外，将背景行颜色应用于nth-child：

.divRow:nth-child(even) {
  background-color: rgb(221, 221, 221);
 }
.divRow:nth-child(odd) {
  background-color: rgb(255, 255, 255);
 }

工作示例

.divTable {
  display: table;
  width: auto;
}
.divRow {
  display: table-row;
  width: auto;
  clear: both;
  overflow: hidden;
}
.divCell {
  display: table-cell;
  padding: 3px;
  vertical-align: top;
}
.lockedRow > div {
  position: relative;
}
.lockedRow > div:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}
.lockedRow > div:first-child:after {
  content: 'Locked Row';
}

.divRow:nth-child(even) {
  background-color: rgb(221, 221, 221);
  }
.divRow:nth-child(odd) {
  background-color: rgb(255, 255, 255);
  }

<div id="main_content">
  <div class="divTable">
    <div class="divRow lockedRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 832</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Jane</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow lockedRow">
      <div class="divCell"><span>id: 832</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Jane</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 832</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Jane</span>
      </div>
      <div class="divCell"><span>Some other long data in a row</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 83223425</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Really Long user name</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 234</span>
      </div>
      <div class="divCell"><span>johnDoe23</span>
      </div>
      <div class="divCell"><span>John</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
    <div class="divRow">
      <div class="divCell"><span>id: 832</span>
      </div>
      <div class="divCell"><span>janeDoe288</span>
      </div>
      <div class="divCell"><span>Jane</span>
      </div>
      <div class="divCell"><span>Doe</span>
      </div>
    </div>
  </div>
</div>

显示位置相对：表格行

1 个答案:

这是两个想法

＃1 - 删除单元格的文本和颜色背景（最简单）

工作示例

＃2 - 重叠行

工作示例