html – Bootstrap日期时间选择器z-index

我使用 bootstrap date time picker.它与日期和时间选择工作正常.但问题是能见度.如果我把它放在任何类型的容器外面,模态是可见的.但是如果我试着把它作为一个td放在一个表中,那么模态是不可见的.我创建了一个 jsfiddle,说明了相同的内容.

我已经浏览了上面提到的网站的css文件,并尝试设置大小,z-index等.但没有任何作用.

请帮我设置z-index或其他解决方案以提高可见性.

<div class="panel panel-info" style="margin-top: 1%">
                <div class="panel-heading" id="JnName">Date Picker</div>
                <div class="panel-body">
                    <form name="form3" role="form">
                        <div class="table-responsive" style="size:auto; max-width: 100%;">
                            <table class="table table-bordered table-striped" id="System Analysis">
                                <tbody>
                                    <tr>
                                        <td width="50%">
                                            <div class="row-fluid">
                                                    <div class="col-xs-4">
                                                        <div class="box">From Date:</div>
                                                    </div>
                                                    <div class='col-sm-8'>
                                                        <div class="form-group">
                                                            <div class='input-group date' id='rptDateFrom'>
                                                                <input type='text' name='rptDateFrom' class="form-control" id="rptDateFrom" onkeydown="return false"  value=''  />
                                                                <span class="input-group-addon">
                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                </span>
                                                            </div>
                                                        </div>

                                                        <script type="text/javascript">
                                                            $(function () {
                                                                $('#rptDateFrom').datetimepicker({
                                                                    //viewMode: 'months',format: 'DD/MM/YYYY',widgetPositioning: 
                                                                     {
                                                                        horizontal: 'left',vertical: 'bottom'
                                                                     } 

                                                                });
                                                            });
                                                        </script>
                                                    </div>
                                            </div>
                                        </td>
                                        <td width="50%">
                                            <div class="row-fluid">
                                                <div class="col-xs-6">
                                                    <div class="box">From Time [HH]:</div>
                                                </div>
                                                <div class='col-sm-6'>
                                                    <div class="form-group">
                                                        <div class='input-group date' id='cboFromTime'>
                                                            <input type='text' name='cboFromTime' class="form-control"  id='cboFromTime' onkeydown="return false"  />
                                                            <span class="input-group-addon">
                                                                <span class="glyphicon glyphicon-time"></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <script type="text/javascript">
                                                        $(function () {
                                                            $('#cboFromTime').datetimepicker({
                                                                //format: 'HH:mm'
                                                                format: 'HH',vertical: 'bottom'
                                                                    }

                                                            });
                                                        });
                                                    </script>
                                                </div>
                                            </div>  
                                        </td>    
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>

我添加了一个图像来显示问题.日期选择器窗口隐藏在面板内的表格后面,并显示滚动.而不是它应该出现在所有这一切之上.

.table-responsive {
  width: 100%;
  margin-bottom: 15px;
   overflow-y: visible;  // Add overflow-y visible
   overflow-x: scroll; 
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid #ddd;
  -webkit-overflow-scrolling: touch;
}