表格单元格内Tom Select下拉选项被高度遮挡的解决方法

算力阿峰

2026-8-30

问题描述

基于Bootstrap搭建的响应式数据表格中，每行内嵌了Tom Select库生成的下拉选择框，存在以下异常：
展开下拉选择框时，下拉选项面板被限制在表格容器内部渲染，受表格容器高度限制与溢出裁剪规则影响，选项无法完整展示，只有拖动表格容器的滚动条向下滚动，才能查看到全部下拉选项。

问题效果参考：

默认界面状态：
打开下拉框被遮挡状态：
滚动表格后可查看全部选项状态：

问题原因

Bootstrap响应式表格的.table-responsive容器默认带有溢出裁剪属性，Tom Select初始化时默认将下拉选项面板插入到选择框所在的父DOM节点下，下拉面板属于表格容器的内部子元素，自然会被容器的溢出规则裁剪，无法超出容器边界完整展示。

解决方案

通过Tom Select原生配置项修改下拉面板的挂载节点，让面板脱离表格容器的DOM层级，即可彻底解决裁剪问题，不需要修改表格原有样式、也不需要改动表格的溢出规则。

具体修改为初始化Tom Select时新增两个配置：

dropdownParent: document.body：将下拉面板直接挂载到页面body节点下，脱离表格容器的DOM嵌套关系，不再受容器溢出裁剪影响
dropdownPosition: 'auto'：让组件自动计算选择框在视口中的位置，自动选择向下/向上弹出面板，避免面板超出视口边界

修改后的选择框初始化代码如下：

function reload_select_unidades(IdSelect){
    let tem_unit = new TomSelect('#IdUnidad_'+IdSelect,{
        valueField: 'IdUnidad',
        labelField: 'Nombre',
        searchField: 'Nombre',
        maxItems: 1,
        // 新增配置解决下拉裁剪问题
        dropdownParent: document.body,
        dropdownPosition: 'auto',
        options:unidades_list,
        render: {
            item: function(item, escape) {
                return `<div><span>
                            ${ escape(item.Nombre) }
                        </span></div>`;
            },
            option: function(item, escape) {
                return `<div><a class="list-group-item list-group-item-action">
                            ${ escape(item.Nombre) }
                        </a></div>`;
            }
        },
    });
}

如果修改后下拉面板被页面其他组件遮挡，可以添加全局样式调整下拉面板的层级，匹配Bootstrap组件的z-index规则即可：

.ts-dropdown {
    z-index: 1050;
}

可复现问题的原始代码

原始JS逻辑

var g_index =0;
var unidades_list = [
    {
        "IdUnidad": "1",
        "Nombre": "Casa conde",
        "Direccion": "Isla del coco",
        "Estado": "1"
    },
    {
        "IdUnidad": "3",
        "Nombre": "123",
        "Direccion": "999",
        "Estado": "1"
    },
    {
        "IdUnidad": "5",
        "Nombre": "casa margarita",
        "Direccion": "Isla el c",
        "Estado": "1"
    },
    {
        "IdUnidad": "6",
        "Nombre": "test",
        "Direccion": " Prueba api",
        "Estado": "1"
    },
    {
        "IdUnidad": "7",
        "Nombre": "Isla tortuga",
        "Direccion": "Colombia",
        "Estado": "1"
    }
 ]
function reload_select_unidades(IdSelect){
    let tem_unit = new TomSelect('#IdUnidad_'+IdSelect,{
        valueField: 'IdUnidad',
        labelField: 'Nombre',
        searchField: 'Nombre',
        maxItems: 1,
        options:unidades_list,
        render: {
            item: function(item, escape) {
                return `<div><span>
                            ${ escape(item.Nombre) }
                        </span></div>`;
            },
            option: function(item, escape) {
                return `<div><a class="list-group-item list-group-item-action">
                            ${ escape(item.Nombre) }
                        </a></div>`;
            }
        },
    });
 }
 jQuery(".add-new").click(function(){
    var index = jQuery("#table-data-list tbody tr:last-child").index();
    var val_index = g_index;
    var row = '<tr id="trow_'+val_index+'">' +
        '<td><input id="IdUnidad_'+val_index+'" name="IdUnidad" required></td>' +
        '<td><input type="text" class="form-control item-t-value" name="DetalleMovimiento"></td>' +
        '<td><input type="text" class="form-control item-t-value" name="TC"></td>' +
        '<td>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_D'+val_index+'">$</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_D'+val_index+'" name="MontoD">'+
        '</div>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_C'+val_index+'">₡</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_C'+val_index+'" name="MontoC">'+
        '</td>' +
        '<td>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_D'+val_index+'">$</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_D'+val_index+'" name="IVAD">'+
        '</div>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_C'+val_index+'">₡</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_C'+val_index+'" name="IVAC">'+
        '</td>' +
        '<td>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_D'+val_index+'">$</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_D'+val_index+'" name="TotalD">'+
        '</div>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_C'+val_index+'">₡</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_C'+val_index+'" name="TotalC">'+
        '</td>' +
        '<td>' + '-' + '</td>' +
        '</tr>';
    let nele = jQuery(row);
    jQuery("#table-data-list").append(nele);
    jQuery('[data-toggle="tooltip"]').tooltip();
    reload_select_unidades(val_index);
  g_index++;
});

原始HTML结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.4/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.4/dist/js/tom-select.complete.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<div class="container-lg">
        <div class="table-responsive">
            <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                <div class="col-sm-4">
                    <button type="button" class="btn btn-info add-new">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus align-middle me-2">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>Add New </button>
                </div>
                </div>
            </div>
            <table width="100%" style="min-heith:400px;" id="table-data-list" class="table table-bordered">
                <thead>
                <tr>
                    <th width="12.5%" >Unidad</th>
                    <th width="20%">Detalle</th>
                    <th width="8.5%">TC</th>
                    <th width="15.5%">Monto </th>
                    <th width="15.5%">IVA </th>
                    <th width="15.5%">Total </th>
                    <th style="width:50px;"></th>
                </tr>
                </thead>
                <tbody></tbody>
                
            </table>
            </div>
        </div>
    </div>

内容的提问来源于stack exchange，提问作者Samuel Leiton

表格单元格内Tom Select下拉选项被高度遮挡的解决方法

原始JS逻辑 #

原始HTML结构 #

原始JS逻辑

原始HTML结构