个人中心
gpt4 book ai didi

html - 表格单元格内的菜单不响应 z-index

转载 作者：行者123 更新时间：2023-11-28 01:10:57 26 4
gpt4 key购买 nike

我有一张类似于此处的表格:https://codepen.io/roberttaraya/pen/QVGRqg

animated gif of table

html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">

  <table id="example">
    <thead>
      <tr>
        <th>Actions</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        <th>Extn.</th>
        <th>E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button class="actions1">show links</button>
          <ul class="actions-list actions1">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions2">show links</button>
          <ul class="actions-list actions2">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Garrett</td>
        <td>Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
        <td>8422</td>
        <td>g.winters@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions3">show links</button>
          <ul class="actions-list actions3">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Ashton</td>
        <td>Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
        <td>1562</td>
        <td>a.cox@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions4">show links</button>
          <ul class="actions-list actions4">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Cedric</td>
        <td>Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
        <td>6224</td>
        <td>c.kelly@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions5">show links</button>
          <ul class="actions-list actions5">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Airi</td>
        <td>Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
        <td>5407</td>
        <td>a.satou@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions6">show links</button>
          <ul class="actions-list actions6">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Brielle</td>
        <td>Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
        <td>4804</td>
        <td>b.williamson@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions7">show links</button>
          <ul class="actions-list actions7">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Herrod</td>
        <td>Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
        <td>9608</td>
        <td>h.chandler@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions8">show links</button>
          <ul class="actions-list actions8">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Rhona</td>
        <td>Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
        <td>6200</td>
        <td>r.davidson@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions9">show links</button>
          <ul class="actions-list actions9">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Colleen</td>
        <td>Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>$205,500</td>
        <td>2360</td>
        <td>c.hurst@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions10">show links</button>
          <ul class="actions-list actions10">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Sonya</td>
        <td>Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>$103,600</td>
        <td>1667</td>
        <td>s.frost@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions11">show links</button>
          <ul class="actions-list actions11">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Jena</td>
        <td>Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>2008/12/19</td>
        <td>$90,560</td>
        <td>3814</td>
        <td>j.gaines@datatables.net</td>
      </tr>
      <tr>
        <td>
          <button class="actions12">show links</button>
          <ul class="actions-list actions12">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </td>
        <td>Quinn</td>
        <td>Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2013/03/03</td>
        <td>$342,000</td>
        <td>9497</td>
        <td>q.flynn@datatables.net</td>
      </tr>
  </tbody>
  </table>

  </div>

</body>
</html>

CSS

.container {
  height: 300px;
  width: 600px;
  background-color: tan;
  overflow:auto;
}

table {
  border-collapse: collapse;
}

table tbody tr td, table thead tr th {
  border: 1px solid black;
  height: 50px;
  width: 1px;
  white-space: nowrap;
}

td:nth-child(1), th:nth-child(1) {
  position:sticky;
  position:-webkit-sticky;
  left: 0px;
  z-index:1;
  background-color:grey;
}

td:nth-child(2), th:nth-child(2) {
  position:sticky;
  position:-webkit-sticky;
  left: 74px;
  z-index:1;
  background-color:grey;
}

table thead tr th {
  background-color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 5;
}

table thead tr th:nth-child(1), 
table thead tr th:nth-child(2) {
  z-index: 6;
}

ul {
  display: none;
}

li{
  position: relative;
}

.actions-list {
  position: absolute;
  border: 1px solid black;
  height: 200px;
  width: 100px;
  top: 20px;
  left: 15px;
  z-index:10;
  background-color: pink;
}

js

$("button").click(function(e) {
  el = $("ul." + this.className).toggle()
})

表格有一个粘性标题和粘性左侧列。在左侧的一列中，我有一个菜单，可以通过链接/按钮打开。当我打开菜单时，我希望它显示在表格单元格的上方和外面，但正如您从代码笔示例中看到的那样，无论我将 z-index 设置为什么，菜单都隐藏在表格单元格后面。

有没有办法实现预期的行为？

最佳答案

这不是很漂亮，但有效:

$("button").click(function(e) {
  el = $("ul." + this.className).toggle();
  
  // add these lines
  $('button').parent().removeClass('above');
  $(this).parent().addClass('above');
})
/* add this to css */
td.above {
    z-index: 10;
}

关于html - 表格单元格内的菜单不响应 z-index，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52103675/

26 4 0
文章推荐： html - 响应式网页设计中的自动高度问题
文章推荐： javascript - JS 调用 php 页面中的函数 - 语法问题
文章推荐： javascript - 如何在页面加载时淡入元素而不是 "appear"？
文章推荐： css - HTML/CSS 如何通过将其堆叠为一列来使显示响应较小的屏幕？