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 則會造成凍結失效

沒有留言:

vue3-simple-alert 學習心得

官網 顯示提示輸入訊息並於按下確定時檢查是否有輸入,防止未輸入就按確定,且和按取消用不同邏輯處理 VueSimpleAlert.fire({     title: '請輸入原因',     input: 'text',     showCancel...