Bootstrap Kendo table 中的下拉菜单?

Bootstrap dropdown in Kendo table?

我在 kendo table 中的 bootstrap 下拉列表中遇到 z-index 问题 table 可以正常工作 fiddle

http://jsfiddle.net/DTcHh/3142/

dropdwon 在 table body 下,我不知道问题在哪里?

HTML

 <table class="table">
        <thead>
            <tr>
                <th><span>Row</span>    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Inbox</a></li>
                            <li><a href="#">Drafts</a></li>
                            <li><a href="#">Sent Items</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Trash</a></li>
                        </ul>
                    </li></th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>Carter</td>
                <td>johncarter@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Rambo</td>
                <td>johnrambo@mail.com</td>
            </tr>
        </tbody>
    </table>

尝试将 class 下拉菜单放入 tr

<tr class="dropdown">
                <th ><span>Row</span>    <div >
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Inbox</a></li>
                            <li><a href="#">Drafts</a></li>
                            <li><a href="#">Sent Items</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Trash</a></li>
                        </ul>
                    </div></th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>