如何阻止boostrap下拉部分隐藏在下一个表行下面

Question

我有这段代码：

<tr>
    <div class="form-group" >
      <th>
        <input type="email" value="{{email}}" class="form-control" id="email">
      </th>
      <th>
        <div class="form-group" s>
          <div class="input-group">
            <input type="text" value="{{password}}" class="form-control" id="password">
            <span class="input-group-btn">
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" style="min-width: auto;">
                  <li><a href="#">Edit</a></li>
                  <li><a href="#">Delete</a></li>
                  <li><a href="#">Add</a></li>
                </ul>
              </div>
            </span>
          </div>
        </div>
      </th>
    </div>
  </tr>

但下拉列表部分隐藏在下一行之下。 我在各个地方尝试了各种各样的z-index，但这并不好。 知道如何解决这个问题吗？