我正在使用库制表器,并try 使用 bootstrap 下拉菜单,但我不知道如何完全显示下拉菜单或显示行外的下拉菜单.

var table = new Tabulator("#example-table", {
    layout:"fitColumns",
    height:"100%",
    ajaxURL:"https://jsonblob.com/api/jsonBlob/1010194405638029312",
    columns:[
    {title:"Report", field:"report_nom"},
    {title:"Last update", field:"report_updatedate", width:300},
    {title:"Action", field:"report_download", formatter:"html", headerSort:false, width:300}
    ]
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/tabulator-tables@5.2.3/dist/css/tabulator.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.3/dist/js/tabulator.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

<div id="example-table"></div>

以下是完整的json数据:

[
  {
    "report_id": 4,
    "report_nom": "Cars",
    "report_description": "Car list",
    "report_frequency": "1",
    "report_filename": "4619082022130005f16de18332f9dab9cbcf6903120837e37762f0c7",
    "access_download": "true",
    "access_id": 3,
    "report_updatedate": "19/08/2022 00:00:09",
    "report_download": "<div style='display: flex'><div class='dropdown'>  <button class='btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Dropdown button</button><div class='dropdown-menu' aria-labelledby='dropdownMenuButton'><a class='dropdown-item' href='#'>Action</a><a class='dropdown-item' href='#'>Another action</a><a class='dropdown-item' href='#'>Something else here</a></div></div></div>"
  }
]

我试着增加了一个高度z-index,但没有解决它.

我正在寻找的结果:

enter image description here

推荐答案

这似乎奏效了!

var table = new Tabulator("#example-table", {
  layout: "fitColumns",
  height: "100%",
  ajaxURL: "https://jsonblob.com/api/jsonBlob/1010194405638029312",
  columns: [{
      title: "Report",
      field: "report_nom"
    },
    {
      title: "Last update",
      field: "report_updatedate",
      width: 300
    },
    {
      title: "Action",
      field: "report_download",
      formatter: "html",
      headerSort: false,
      width: 300
    }
  ]
});
#example-table {
  overflow: visible !important;
}

#example-table .tabulator-cell {
  overflow: visible !important;
}

#example-table .tabulator-tableholder {
  overflow: visible !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/tabulator-tables@5.2.3/dist/css/tabulator.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.3/dist/js/tabulator.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

<div id="example-table"></div>

Html相关问答推荐

将输入字段下方的两个按钮设置为两侧对齐

使用css第n个子元素,如何迭代Y组中的X个元素?

如果DIV没有特定的sibling 姐妹,则以CSS为目标

响应网格,响应调整大小以适应父div,保留父div S自己的响应高度

与窗高匹配的响应式正方形网格

CSS 伪类 Select 器未按预期工作

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

当多个a元素用作目标时的:target伪类

margin-top 未应用于无序列表的第一项

图像如何能达到 HTML 表格的全宽?

Flex布局中,当父元素高度较高时,交叉轴上出现额外的空白问题.

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

pandas `to_html()` - 如何只使特定的行有边框

为什么 text-align 应用于 span 而不是 CSS 中的 img

为什么在使用src与srcdoc时 iframe 内容高度呈现不同?

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

如何在没有 JS 的情况下创建带搜索的 Select 菜单

列宽等于最宽列宽度的无界容器

如何添加适合我的内容的背景图片?

向卡片添加过渡