Question

我有一张由DIV生成的表格。我需要让第一个细胞冷冻，而其他细胞可以来回移动。

问题：位置：固定分配给第一个单元格后，第二个单元格位于第一个单元格的下方。

如何解决这个问题，以便每个单元格一个接一个地显示，第一个单元格将被冻结，不会与第二个单元格重叠？

请伸出援助之手。感谢

P.S。由于此表是由系统生成的，因此我们无法将其转换为<tr> <td> table。

HTML

<div class="container">
  <div class="test">
  This cell will be fixed position
  </div>
  <div class="test1">
  111111111111111111111111111111111111
  </div>
    <div class="test1">
  a4a1ece5-070e-6f08-fead-49851ceb7d93
  </div>
    <div class="test1">
  a4a1ece5-070e-6f08-fead-49851ceb7d93
  </div>
    <div class="test1">
  a4a1ece5-070e-6f08-fead-49851ceb7d93
  </div>
    <div class="test1">
  a4a1ece5-070e-6f08-fead-49851ceb7d93
  </div>
    <div class="test1">
  a4a1ece5-070e-6f08-fead-49851ceb7d93
  </div>
  </div>

CSS

.test1 {
      word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
    border: 1px solid red;
    width: 120px;
    float: left;
}
.test {
  position: fixed;
      word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
    background: green;
    color: white;
    width: 120px;
}
html {
  width: 5000px
}
.container {
 /*  display: flex; */
  border: 1px solid yellow
}

Answer 1

将此类添加到您的代码中

.container .test1{
  margin-left:120px;
}

.container > .test1 ~ .test1 {
  margin-left:0;
}

它获得了类.test1的第一次出现并为其添加了一个边距。

Answer 2

试试这个，将你的css更新为以下内容。

JSFiddle demo

.test1 {
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
border: 1px solid red;
width: 120px;
float: left;    
}

.container div:nth-child(2) {
margin-left: 120px;
}

.test {  
position: fixed;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
background: green;
color: white;
width: 120px;    
}

html {
width: 5000px
}

.container {
display: flex; 
border: 1px solid yellow;
flex-flow: row nowrap;
position: relative;  
}

Divs Table

2 个答案: