2020年5月7日 星期四

table凍結欄跟列

假設凍結第一列及前三欄

css
====
 div.divunfinish {
  overflow: auto;height:300px; /* 非必要 */
}
     div.divunfinish   thead td {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;background-color:Brown;
}
div.divunfinish thead td:nth-child(1) {
  left: 0;
  z-index: 1;
}
div.divunfinish thead td:nth-child(2) {
  left: 40px;
  z-index: 1;
}
div.divunfinish thead td:nth-child(3) {
  left: 100px;
  z-index: 1;
}
div.divunfinish tbody td:nth-child(1) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;background-color:white;
}
div.divunfinish tbody td:nth-child(2) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 40px;background-color:white;
}
div.divunfinish tbody td:nth-child(3) {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 100px;background-color:white;
}

html
====
<div class="divunfinish">
<table style="width: 1530px;" >
<thead>
<tr>
...
<tbody>
<tr>
...

※ bootstrapvue b-table 若有設定為 responsive 則會造成凍結失效

沒有留言:

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器