Html 如何添加对非常宽的表的每条记录始终可见的操作图标？_Html_Css_Html Table

Html 如何添加对非常宽的表的每条记录始终可见的操作图标？

html css

Html 如何添加对非常宽的表的每条记录始终可见的操作图标？,html,css,html-table,Html,Css,Html Table,在我的应用程序中，我有一个非常大的表，有20列，有时比整个显示器都宽我在末尾有一个名为“Actions”的专栏。此列使用户可以编辑/删除表中的记录。由于表太宽，用户总是在看到操作之前向右滚动，这很无聊我想改变这种行为，使鼠标悬停在记录2图标上时，无论滚动点在水平位置，都会向下滚动我曾尝试破解在每条记录中添加带有绝对位置的div的限制，但HTML不允许在tr标记中添加div 我建议你安排两张桌子一个用于数据列的表一个表，带有单列操作图标使用Javascript处理图标单击，获取图标的

在我的应用程序中，我有一个非常大的表，有20列，有时比整个显示器都宽

我在末尾有一个名为“Actions”的专栏。此列使用户可以编辑/删除表中的记录。由于表太宽，用户总是在看到操作之前向右滚动，这很无聊

我想改变这种行为，使鼠标悬停在记录2图标上时，无论滚动点在水平位置，都会向下滚动

我曾尝试破解在每条记录中添加带有绝对位置的div的限制，但HTML不允许在tr标记中添加div

我建议你安排两张桌子

一个用于数据列的表
一个表，带有单列操作图标
使用Javascript处理图标单击，获取图标的行索引以确定数据表中的哪一行将受到影响
使用CSS
```
Position:fixed
```
，
```
right:0px
```
属性将一列表设置为最右侧
最后，给单列表一个比数据列大的
```
z-index
```
属性

如果您需要更多详细信息，请告诉我。

您可以使用focus（）让父容器滚动到您的操作按钮

这是一个例子。jQuery不是必需的，但它使事情变得更容易。（）：


jQuery（函数（）{
jQuery（“TABLE”）.on（“mouseover”，function（）{
jQuery（this.find（“按钮”）.focus（）；
});
});
#容器{
宽度：200px；
溢出：滚动；
}
细胞
细胞
细胞
细胞
细胞
细胞
细胞
行动1
细胞
细胞
细胞
细胞
细胞
细胞
细胞
行动2

编辑：这一行没有那么紧张

你能用CodePen或JSFiddle做一个演示吗？为什么不把“Actions”列移到第一行？@McCaughan，因为一旦用户向右滚动，它就会消失。我在想类似的事情，但如果其中一行的高度高于其他行，这可能会中断。我可以使用js来检查这一点。但这似乎是一个黑客。有另一个解决方案，使用绝对位置，但我不喜欢它，因为它可能有不同的决议问题。将最后一列设置为位置：绝对；右图：120px，所以最后一列总是从右边120px，这实际上是个好主意！虽然这有点令人不安。是的，我发现它有点难以导航，因为行总是集中在按钮上。也许我会修改它，让它更方便用户。添加了另一个小提琴，但这只是一个在黑暗中拍摄。实际上，我只是想说明，如果你按下.focus（）按钮，你的容器就会滚动到它。在你的案例中，可能有比我的说明更好的方法来实现这一点。也许在行的某个地方点击一下可以触发焦点。。。

<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
jQuery(function() {
    jQuery("TABLE").on("mouseover", function() {
        jQuery(this).find("BUTTON").focus();
    });
});
</script>
<style>
#container {
    width:200px;
    overflow:scroll;
}
</style>

<div id="container">
    <table style="border:1px solid red;">
    <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td class="actions">
            <button type="button">action 1</button>
        </td>
    </tr>
        <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td class="actions">
            <button type="button">action 2</button>
        </td>
    </tr>
    </table>
</div>
</html>