Dropdown menu from table row in Bootstrap

SkynetWebS picture SkynetWebS · Dec 10, 2012 · Viewed 39.3k times · Source

I'm trying to get a dropdown menu working from a table row using the Jasny extension found http://www.jasny.net/bootstrap/components/#rowlink. Unfortunately I can't seem to get it to work to display a dropdown. I have en example of what I've done so far:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>
            Heading
        </th>
        <th>
            Heading
        </th>
    </tr>
</thead>
<tbody data-provides="rowlink">
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr>
        <td>
            Cell
        </td>
        <td>
            Cell
        </td>    
    </tr>         
</tbody>
</table>​

Clicking row will follow href link, instead of displaying the dropdown menu. I can get the rowlink extension to work as a link or to call a modal window. I can also get a dropdown to come from a single cell (without jasny extension), but would like it to work from the whole row.

Answer

Shital Shah picture Shital Shah · Dec 2, 2013

Bootstrap 3.x

By default Bootstrap dropdowns inside a table cell doesn't show up properly (they would show up at the bottom of the page). To fix this you need to set class for the container as dropdown. For table cells, this would look like this:

<td class="dropdown">

DEMO: http://jsfiddle.net/sytelus/kzxes29r/

PS: If you don't want to change style for table cell, you can also create a div inside cell and set its class to "dropdown".