亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

嵌套滾動窗口中的粘性 HTML 元素無法正確呈現

嵌套滾動窗口中的粘性 HTML 元素無法正確呈現

撒科打諢 2023-03-24 14:55:43
在以下情況中...JSFiddle...如果稍微滾動一下外部表格,您會看到內部滾動容器中的粘性表格標題實際上呈現在外部滾動容器標題的頂部。這兩組標頭不應該存在于單獨的堆棧上下文中嗎?除了硬編碼 z-index 值之外,是否有任何解決方法?這只是動態生成的模型,因此我必須放置大量管道以動態計算相對于所有其他級別在每個級別使用的正確 z-index 值。這里沒有使用JavaScript 框架,只使用TypeScript和 require。HTML代碼:<div class="scroll-container">  <table class="outer-table">    <thead>      <tr>        <th>Outer Column 1</th>        <th>Outer Column 2</th>      </tr>    </thead>    <tbody>      <tr>        <td>Outer Value 1</td>        <td>Outer Value 2</td>      </tr>      <tr>        <td colspan="2">          <div class="scroll-container">            <table class="inner-table">              <thead>                <tr>                  <th>Inner Column 1</th>                  <th>Inner Column 2</th>                  <th>Inner Column 3</th>                </tr>              </thead>              <tbody>                <tr>                  <td>Inner Value 1</td>                  <td>Inner Value 2</td>                  <td>Inner Value 3</td>                </tr>                <tr>                  <td>Inner Value 1</td>                  <td>Inner Value 2</td>                  <td>Inner Value 3</td>                </tr>                <tr>                  <td>Inner Value 1</td>                  <td>Inner Value 2</td>                  <td>Inner Value 3</td>                </tr>                <tr>                  <td>Inner Value 1</td>                  <td>Inner Value 2</td>                  <td>Inner Value 3</td>                </tr>                <tr>                  <td>Inner Value 1</td>                  <td>Inner Value 2</td>                  <td>Inner Value 3</td>                </tr>
查看完整描述

1 回答

?
倚天杖

TA貢獻1828條經驗 獲得超3個贊

您只有一個類為兩個表工作,因此沒有區分哪個出現在另一個表的頂部或下方。您可能別無選擇,只能使用兩個單獨的類并為每個類添加一個 z-index。例如 - 對每個表使用相同的整個類定義:


table.outer-table thead tr th {

  position:sticky;

  top:0px;

  height:2em;

  z-index:99;

}


table.inner-table thead tr th {

  position:sticky;

  top:0px;

  height:2em;

  z-index:98;

}

我在你的 JSFiddle 頁面上測試了這個,它似乎做了你想要的,所以看起來 z-index 在這里很重要。如果表的嵌套可以很廣泛,一個類可以使用類似的東西來定位它們:


table {z-index:99}

table > table {z-index:98}

table > table > table {z-index:97}

即 - 一個表,表中表和表中表中的表。


查看完整回答
反對 回復 2023-03-24
  • 1 回答
  • 0 關注
  • 102 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號