固定的行只由div组成

时间：2017-08-31 08:36:15

标签： html css

我必须只用div创建一个表，我需要在滚动时将第一行固定在顶部，如果我在这里发布我的HTML和CSS的表溢出了。我不能使用BOOTSTRAP !!!

我尝试了固定位置......但是它会摧毁＆＃34;该行的CSS，我没有任何其他想法。

＆＃13;
＆＃13; 
.table {
  padding-left: 10px;
  padding-right: 10px;
  max-height: 300px;
  overflow-y: scroll;
}

.calls-table {
  display: table;
  max-height: 400px;
  overflow: auto;
  border-collapse: separate;
  /* table-layout: fixed;*/
  width: 100%;
  color: #262626;
  border: 1px solid #dfdfdf;
}

.calls-table-row {
  display: table-row;
}

.calls-table-row:hover {
  background-color: #80ffaa;
  color: white;
  cursor: pointer;
}

.header-row:hover {
  color: black;
  background-color: white;
  cursor: auto;
}

.calls-table-cell {
  display: table-cell;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}

.th {
  font-weight: bold;
  padding-left: 4px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.td {
  padding-right: 15px;
  color: #76605a;
  font-weight: bold;
  padding: 5px;
}

.first-td-row {
  -webkit-box-shadow: 1px 17px 57px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 1px 17px 57px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 1px 17px 57px 0px rgba(0, 0, 0, 0.05);
}
＆＃13; 
<div class="table">
  <div class="calls-table">
    <div class="calls-table-row header-row first-td-row">
      <div class="calls-table-cell th">Time</div>
      <div class="calls-table-cell th">Client name</div>
      <div class="calls-table-cell th">Client email</div>
      <div class="calls-table-cell th">IP</div>
      <div class="calls-table-cell th">Location</div>
      <div class="calls-table-cell th">Language</div>
      <div class="calls-table-cell th">Waiting from</div>
      <div class="calls-table-cell th">Taken by</div>
      <div class="calls-table-cell th">Status</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td ">10:46</div>
      <div class="calls-table-cell td">John Andrews</div>
      <div class="calls-table-cell td">dj@aol.com</div>
      <div class="calls-table-cell td">79.62.113.50</div>
      <div class="calls-table-cell td">Poland</div>
      <div class="calls-table-cell td">English</div>
      <div class="calls-table-cell td">0:47</div>
      <div class="calls-table-cell td">-</div>
      <div class="calls-table-cell td">waiting</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:45</div>
      <div class="calls-table-cell td">Milena Ivanova</div>
      <div class="calls-table-cell td">29_08@mypos.eu</div>
      <div class="calls-table-cell td">82.119.81.30</div>
      <div class="calls-table-cell td">Bulgaria</div>
      <div class="calls-table-cell td">Bulgarian</div>
      <div class="calls-table-cell td">1:23</div>
      <div class="calls-table-cell td">-</div>
      <div class="calls-table-cell td">waiting</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:44</div>
      <div class="calls-table-cell td">Ivan Ivanov</div>
      <div class="calls-table-cell td">i.f.ivanov@gmail.com</div>
      <div class="calls-table-cell td">2.43.229.251</div>
      <div class="calls-table-cell td">UK</div>
      <div class="calls-table-cell td">English</div>
      <div class="calls-table-cell td">0:29</div>
      <div class="calls-table-cell td">Petur Ivanov</div>
      <div class="calls-table-cell td">On the line</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:44</div>
      <div class="calls-table-cell td">John Andrews</div>
      <div class="calls-table-cell td">dj@aol.com</div>
      <div class="calls-table-cell td">79.62.113.50</div>
      <div class="calls-table-cell td">Poland</div>
      <div class="calls-table-cell td">English</div>
      <div class="calls-table-cell td">0:47</div>
      <div class="calls-table-cell td">-</div>
      <div class="calls-table-cell td">waiting</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:41</div>
      <div class="calls-table-cell td">Ivelina Smith</div>
      <div class="calls-table-cell td">i.smith@gmail.com</div>
      <div class="calls-table-cell td">21.11.69.249</div>
      <div class="calls-table-cell td">Netherlands</div>
      <div class="calls-table-cell td">Dutch</div>
      <div class="calls-table-cell td">1:01</div>
      <div class="calls-table-cell td">Maria Atanasova</div>
      <div class="calls-table-cell td">Completed</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:41</div>
      <div class="calls-table-cell td">Ivelina Smith</div>
      <div class="calls-table-cell td">i.smith@gmail.com</div>
      <div class="calls-table-cell td">21.11.69.249</div>
      <div class="calls-table-cell td">Netherlands</div>
      <div class="calls-table-cell td">Dutch</div>
      <div class="calls-table-cell td">0:01</div>
      <div class="calls-table-cell td">Maria Atanasova</div>
      <div class="calls-table-cell td">Time out</div>
    </div>
  </div>
  <!--calls-table-->
</div>
＆＃13;
＆＃13;
＆＃13;

提前致谢！

1 个答案:

答案 0 :(得分：0)

您可以像这样使用fixed css：

.table {
  padding-left: 10px;
  padding-right: 10px;
  max-height: 300px;
  overflow-y: scroll;
  position: relative;
}

.calls-table {
  display: table;
  max-height: 400px;
  overflow: auto;
  border-collapse: separate;
  /* table-layout: fixed;*/
  width: 100%;
  color: #262626;
  border: 1px solid #dfdfdf;
  padding-top: 30px;
}

.calls-table-row {
  display: table-row;
}

.calls-table-row:hover {
  background-color: #80ffaa;
  color: white;
  cursor: pointer;
}

.header-row:hover {
  color: black;
  background-color: white;
  cursor: auto;
}

.calls-table-cell {
  display: table-cell;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}

.th {
  font-weight: bold;
  padding-left: 4px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.td {
  padding-right: 15px;
  color: #76605a;
  font-weight: bold;
  padding: 5px;
}
.calls-table-row.header-row.first-td-row {
    position: fixed;
    width: 100%;
    background: #fff;
    top: 0;
}
.first-td-row {
  -webkit-box-shadow: 1px 17px 57px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 1px 17px 57px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 1px 17px 57px 0px rgba(0, 0, 0, 0.05);
}
<div class="table">
  <div class="calls-table">
    <div class="calls-table-row header-row first-td-row">
      <div class="calls-table-cell th">Time</div>
      <div class="calls-table-cell th">Client name</div>
      <div class="calls-table-cell th">Client email</div>
      <div class="calls-table-cell th">IP</div>
      <div class="calls-table-cell th">Location</div>
      <div class="calls-table-cell th">Language</div>
      <div class="calls-table-cell th">Waiting from</div>
      <div class="calls-table-cell th">Taken by</div>
      <div class="calls-table-cell th">Status</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td ">10:46</div>
      <div class="calls-table-cell td">John Andrews</div>
      <div class="calls-table-cell td">dj@aol.com</div>
      <div class="calls-table-cell td">79.62.113.50</div>
      <div class="calls-table-cell td">Poland</div>
      <div class="calls-table-cell td">English</div>
      <div class="calls-table-cell td">0:47</div>
      <div class="calls-table-cell td">-</div>
      <div class="calls-table-cell td">waiting</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:45</div>
      <div class="calls-table-cell td">Milena Ivanova</div>
      <div class="calls-table-cell td">29_08@mypos.eu</div>
      <div class="calls-table-cell td">82.119.81.30</div>
      <div class="calls-table-cell td">Bulgaria</div>
      <div class="calls-table-cell td">Bulgarian</div>
      <div class="calls-table-cell td">1:23</div>
      <div class="calls-table-cell td">-</div>
      <div class="calls-table-cell td">waiting</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:44</div>
      <div class="calls-table-cell td">Ivan Ivanov</div>
      <div class="calls-table-cell td">i.f.ivanov@gmail.com</div>
      <div class="calls-table-cell td">2.43.229.251</div>
      <div class="calls-table-cell td">UK</div>
      <div class="calls-table-cell td">English</div>
      <div class="calls-table-cell td">0:29</div>
      <div class="calls-table-cell td">Petur Ivanov</div>
      <div class="calls-table-cell td">On the line</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:44</div>
      <div class="calls-table-cell td">John Andrews</div>
      <div class="calls-table-cell td">dj@aol.com</div>
      <div class="calls-table-cell td">79.62.113.50</div>
      <div class="calls-table-cell td">Poland</div>
      <div class="calls-table-cell td">English</div>
      <div class="calls-table-cell td">0:47</div>
      <div class="calls-table-cell td">-</div>
      <div class="calls-table-cell td">waiting</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:41</div>
      <div class="calls-table-cell td">Ivelina Smith</div>
      <div class="calls-table-cell td">i.smith@gmail.com</div>
      <div class="calls-table-cell td">21.11.69.249</div>
      <div class="calls-table-cell td">Netherlands</div>
      <div class="calls-table-cell td">Dutch</div>
      <div class="calls-table-cell td">1:01</div>
      <div class="calls-table-cell td">Maria Atanasova</div>
      <div class="calls-table-cell td">Completed</div>
    </div>
    <div class="calls-table-row">
      <div class="calls-table-cell td">10:41</div>
      <div class="calls-table-cell td">Ivelina Smith</div>
      <div class="calls-table-cell td">i.smith@gmail.com</div>
      <div class="calls-table-cell td">21.11.69.249</div>
      <div class="calls-table-cell td">Netherlands</div>
      <div class="calls-table-cell td">Dutch</div>
      <div class="calls-table-cell td">0:01</div>
      <div class="calls-table-cell td">Maria Atanasova</div>
      <div class="calls-table-cell td">Time out</div>
    </div>
  </div>
  <!--calls-table-->
</div>

同时检查Fiddle

相关问题
最新问题