选择选项在数据表中不可见答案

【问题标题】：select option is not visible in Datatable选择选项在数据表中不可见
【发布时间】：2018-04-23 12:47:40
【问题描述】：

$(document).ready(function(){
var table = $('#example').DataTable({
    dom: 'Zlfrtip',
    colReorder: true,
    scrollY:        300,
    deferRender: true,
    scrollX:        true,
    scrollCollapse: true,
    scroller: false,
    deferRender: true,
    autoWidth: false,
    searching: false,
    paging: false,
    ordering: false,
    info: false,
    "columns": [{
        "data": "Item",
        "width": "200px"
    }, ],
    "colResize": {
        "tableWidthFixed": false
    }
});
  $('.selectpicker').selectpicker({
      size: 12,
      dropupAuto: false
  });
})

<link href="https://www.vsss.co.in/Admin/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/bootstrap-select.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>



<table class="table table-striped table-bordered table-hover order-column item_data" id="example" style="table-layout: fixed">
    <thead>
        <tr>
            <th>Item</th>
        </tr>
    </thead>
    <tbody>
       <tr>
           <td>
							<select class="form-control selectpicker">
							   <option>Example 1</option>
							   <option>Example 2</option>
							   <option>Example 3</option>
							   <option>Example 4</option>
							   <option>Example 5</option>
							</select>
           </td>
       </tr> 
    </tbody>
</table>

谁能看一下这段代码，请告诉我为什么选择选择器在表格中显示选项。如何在表格上显示选项，我尝试了 z-index 但没有奏效。提前致谢。当我删除它时它工作得很好

scrollCollapse: true

由于某种原因，我无法删除它。有谁有解决办法不去掉吗？

【问题讨论】：

标签： html css twitter-bootstrap datatable bootstrap-selectpicker

【解决方案1】：

类调用dataTables_scrollBody 有一个overflow: auto; 您必须在none 中选择此项。

.dataTables_scrollBody{
  overflow:none
}

【讨论】：

它会影响 scrollCollapse: true 行为吗？
如果我很了解您的需求，肯定会起作用，请在您的示例代码中尝试inspector web。

【解决方案2】：

为selectpicker 使用选项{"container": "body"}。这是一个sn-p：

$(document).ready(function(){
var table = $('#example').DataTable({
    dom: 'Zlfrtip',
    colReorder: true,
    scrollY:        300,
    deferRender: true,
    scrollX:        true,
    scrollCollapse: true,
    scroller: false,
    deferRender: true,
    autoWidth: false,
    searching: false,
    paging: false,
    ordering: false,
    info: false,
    "columns": [{
        "data": "Item",
        "width": "200px"
    }, ],
    "colResize": {
        "tableWidthFixed": false
    }
});
  $('.selectpicker').selectpicker({
      size: 12,
      dropupAuto: false,
      container: 'body'
  });
})

<link href="https://www.vsss.co.in/Admin/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="https://www.vsss.co.in/Admin/assets/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/bootstrap-select.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="https://www.vsss.co.in/Admin/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>



<table class="table table-striped table-bordered table-hover order-column item_data" id="example" style="table-layout: fixed">
    <thead>
        <tr>
            <th>Item</th>
        </tr>
    </thead>
    <tbody>
       <tr>
           <td>
							<select class="form-control selectpicker">
							   <option>Example 1</option>
							   <option>Example 2</option>
							   <option>Example 3</option>
							   <option>Example 4</option>
							   <option>Example 5</option>
							</select>
           </td>
       </tr> 
    </tbody>
</table>

这是相同的 doc：BS Selectpicker's container option

【讨论】：