IPAD浏览器中的下拉菜单问题

Question

我在IPAD浏览器（Chrome和Safari）中遇到问题，例如当我点击下拉菜单时，值隐藏在表格部分中。 我在这里附上图片。

我使用了z-index属性，但问题仍然没有解决。

这是我的表

的代码

<div class="table-responsive">
    <table class="table table-striped m-b-none text-small b-b" id="eventListTable">
        <thead>
            <tr>
            <th style="width:2% !important;"></th>
                <th width="15%"></th>               
                <th width="10%"></th> 
                <th width="10%"></th>

                   <th width="10%"></th>

                   <th width="10%"></th>


                <th width="10%"></th>

                <th width="10%"></th>               
                <th width="10%"></th>

                <th width="10%"></th>

                <th width="30%"></th>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</div>

表数据的代码<td>和下拉列表在表格内。：

<td> <input type='checkbox' id='eventCheckBox' value=''></td>
<td width="20%" class="wrap-sm"><a class="dropdown-toggle h5"
    data-toggle="dropdown" href="#" id="eventName" ></a>
    <small class="block"></small>
    <h6><span class="label label-info"></span></h6>
</td>

<td width="8%"><h5></h5></td>
<td width="10%"><h5><a href="#" id="registeredCount" title="></a></h5></td>
<td width="9%"><h5><a href="#" id="checkedInCount"></a></h5></td>
<td width="12%"><h5></h5></td>

<td width="15%"><h5><small class="label bg-light"></small></h5></td>
<td width="15%"><h5><small class="label bg-light"></small></h5></td>

<td width="10%" align="center" style="padding-top:20px">
<i class="icon-circle text-success"></i></td>
<td style="padding-top:20px;">
    <div class="btn-group dropup AttendeeDropDown">
            <img src="images/icon-add-attendee.png" alt="Add Attendee" class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;"/>
        <ul class="dropdown-menu" style="margin-left:-122px;">
                <li><a href="#" id="addAttendeeBtn" data-value="NewAttendee"> Create New Attendee</a></li>
                <li><a href="#" id="addAttendeeBtn" data-value="ExistingAttendee">Add Existing Attendee</a></li>
                <li><a href="#" id="addAttendeeBtn" data-value="Import">Import</a></li>
                <li><a href="#" id="addAttendeeBtn" data-value="Export">Export</a></li>
            </ul>
        </div>

Code for dropdown inside the table.

     <div class="btn-group dropup AttendeeDropDown">
                <img src="images/icon-add-attendee.png" alt="Add Attendee" class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;"/>
            <ul class="dropdown-menu" style="margin-left:-122px;">
                    <li><a href="#" id="addAttendeeBtn" data-value="NewAttendee"> Create New Attendee</a></li>
                    <li><a href="#" id="addAttendeeBtn" data-value="ExistingAttendee">Add Existing Attendee</a></li>
                    <li><a href="#" id="addAttendeeBtn" data-value="Import">Import</a></li>
                    <li><a href="#" id="addAttendeeBtn" data-value="Export">Export</a></li>
                </ul>
            </div>

我正在为我的应用程序使用bootstrap.css ..

如何使用css或使用任何脚本显示表格下拉列表？