-1
divでテーブルを作成する必要があります。ここでHTMLとCSSを投稿したテーブルのoverflow-yがある場合、スクロールするときに最初の行を上に固定する必要があります。私はBOOTSTRAPを使用してはいけません！divでのみ作成されたテーブルの固定行
私は位置固定を試みました...しかし、それは行のCSSを "破壊"し、他のアイデアはありません。事前に
.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);
}<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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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>ありがとう！