css 弹出窗口不适用于表格的最后一行

发布于 2024-09-28 18:42:38 字数 409 浏览 8 评论 0原文

嗨，大家好！

所以我有一个 html 表格。其中一列的单元格中有一个弹出窗口，用于显示一些信息。表格也很大，所以我在@Stanley的帮助下使用jquery在页面的顶部和底部添加了水平滚动条，请参阅问题。

弹出窗口始终位于单元格的底部。但滚动条隐藏了最后一个。
所以我想要的是将弹出窗口保留在滚动条上方。

我尝试 put

z-index: 999; #popup hover 
z-index: 1; #scrollbar

但不起作用。
有人有什么想法吗？

如果需要任何代码，请询问。

谢谢大家！

原文

HI guys!

So I've a table in html. And one of the columns has a popup in the cell to show some information. the table is also quite large so I've added an horizontal scrollbar on the top and bottom of the page with jquery, with the help of @Stanley, see question.

The popup always stays at the bottom of the cell. But the scrollbar hides the last ones.
So what I would like is the popup to stay above the scrollbar.

I tried put

z-index: 999; #popup hover 
z-index: 1; #scrollbar

but that doesn't work.
Anyone has any idea?

If any code is needed, just ask.

Thank you all!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟若柳尘 2024-10-05 18:42:38

使用 firefox firebug 并使用它定位

 css  top:100px,left:100px.

它可以增加表格的宽度吗？
实际上我也有类似的问题。
我在第一个表格下方放置了一个具有弹出窗口高度的空表格（单击该表格列时会显示弹出窗口）。

因此弹出窗口不会隐藏，也不会进入滚动条内部。

<table><tr><td>on click or mouse over show popup</td></tr>
<tr><td>on click or mouse over show popup</td></tr>
<tr><td>on click or mouse over show popup</td></tr>
<tr><td>as this the last td popup was going inside the scroll so i put table below</td></tr></table>

<table><tr><td height='50px'> </td></tr></table>

如果这根本不是你的情况。请原谅我。 :)

use firefox firebug and position it using

 css  top:100px,left:100px.

can you increase width of table?
actually i had a similar issue .
i put an empty table with height of popup below the first table (you show popup on clicking of this tables columns).

So the popup will not hide, or go inside the scroll.

<table><tr><td>on click or mouse over show popup</td></tr>
<tr><td>on click or mouse over show popup</td></tr>
<tr><td>on click or mouse over show popup</td></tr>
<tr><td>as this the last td popup was going inside the scroll so i put table below</td></tr></table>

<table><tr><td height='50px'> </td></tr></table>

If this not at all your situation. pardon me . :)

回复收藏 0 原文

Spring初心 2024-10-05 18:42:38

在模板中，底部：

 <div id="popup-flyer"></div>

Javascript 文件：

function make_tooltip () {
   var tooltip = $(this);
   var flyer = $("#popup-flyer");
   flyer.css('position', 'absolute');
   flyer.css('left', tooltip.position().left + 30);
   flyer.css('top', tooltip.position().top);
   flyer.append(tooltip.children('span').clone());
   flyer.show(1);
};

function hide_tooltip () {
   var tooltip = $(this);
   var flyer = $("#popup-flyer");
   flyer.hide(1);
   flyer.children('span').remove();
};

$(document).ready( function () {
$(".tooltip").hover(make_tooltip, hide_tooltip);
});

css：

a class='tooltip'>
                <img src="image" alt="" height="20" width="20" />
                    <span> lalalakalsjsjhfksajhfdsh
                           text here....
                    </span>
            </a>

In the template, at the bottom:

 <div id="popup-flyer"></div>

Javascript file:

function make_tooltip () {
   var tooltip = $(this);
   var flyer = $("#popup-flyer");
   flyer.css('position', 'absolute');
   flyer.css('left', tooltip.position().left + 30);
   flyer.css('top', tooltip.position().top);
   flyer.append(tooltip.children('span').clone());
   flyer.show(1);
};

function hide_tooltip () {
   var tooltip = $(this);
   var flyer = $("#popup-flyer");
   flyer.hide(1);
   flyer.children('span').remove();
};

$(document).ready( function () {
$(".tooltip").hover(make_tooltip, hide_tooltip);
});

the css:

a class='tooltip'>
                <img src="image" alt="" height="20" width="20" />
                    <span> lalalakalsjsjhfksajhfdsh
                           text here....
                    </span>
            </a>

回复收藏 0 原文

~没有更多了~