当列溢出数据时，如何在jquery数据表中使单列可滚动？

Question

我使用 jquery 数据表在表中显示我的列表。但有时对于单个 id，我必须在单个列中打印多个数据。结果我的专栏变大了。因此，如果该列中的数据溢出，我想使该列可滚动。

在 Files 列中，我有多个文件用于单个列。当有多个文件时，我想让该列可滚动。可能吗？在我的 html 中，我为 jquery 表编写了 java 脚本代码是

<script>
    $(function () {
        $("#currentAcrTable").DataTable({
            "columnDefs": [

                { "targets": [1,2,3,4,5], "searchable": false },
                { "width": "15%", "targets": 4 }
            ]
        });
        $("#oldAcrTable").DataTable();
    });
</script>

而我用于迭代循环和显示数据的 html 代码是

 <tr th:each="acr : ${list}">
                        <td th:text="${acr.govtId}" align="center"></td>
                        <td th:text="${acr.year}" align="center"></td>
                        <td th:text="${acr.assigned_from}" align="center"></td>
                        <td th:text="${acr.assigned_to}" align="center"></td>


                        <td align="center">

                            <div class="scroll_y" style="overflow-x:hidden; overflow-y:scroll;">
                            <span th:each="file: ${acr.filelist}">
                                <a href=""><img th:src="@{/images/pdf-icon.png}" width="15px" height="15px"/></a>
                            </span>
                            </div>

                        </td>
    </tr>

根据 Joseph_J 的回答，我在td 中添加了<div class="scroll_y" style="overflow-x:hidden; overflow-y:scroll;">。但是没有变化

Answer 1

在文件列中的单元格中，您可以添加一些溢出属性。

我读到表格单元格本身不能很好地处理溢出。建议您在单元格中放置一个 div，然后为 div 设置样式。

像这样：

<td>
  <div style="width:50px; height:50px; overflow-y:scroll;">To much data, this cell needs to scroll.</div>
</td>

在上面的代码中，我添加了内联样式来为 div 添加滚动属性。

您还可以创建一个包含滚动属性的 css 类。我相信您可以使用 dataTables 属性为特定列定义一个类。

CSS：

.scroll_y{

  height:50px;
  width:50px;
  overflow-y: scroll;

}

HTML：

<td>
  <div class="scroll_y">To much data, this cell needs to scroll.</div>
</td>

希望对您有所帮助！

Answer 2

请尝试将此样式赋予您想要滚动的 td 你可以根据你的要求给它固定的高度

style=" height:40px ;  overflow-y: scroll; display: block"

查看此链接以供参考

https://codepen.io/singhagam1/pen/MZVrrJ