Table in Bootstrap Dropdown

Question

我想在Bootstrap 3.3.7下拉列表中显示一个表。理想情况下，我也希望显示表格标题。

https://codepen.io/Falven/pen/YjyrKX

.dropdown {
display: table;
}
.dropdown-menu li {}
.dropdown-menu li a {
display: table-row;
}
.dropdown-menu li a span {
display: table-cell;
}

<div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<table class="dropdown-menu" aria-labelledby="dropdownMenu1">
<tr>
<th>File Name</th>
<th>Status</th>
</tr>
<tr>
<a href="#">
<td>Jill</td>
<td>Smith</td>
</a>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a href="#">
<span>Row1Col1-abcdefghijk</span>
<span>Row1Col2</span>
</a>
</li>
<li>
<a href="#">
<span>Row2Col1</span>
<span>Row2Col2</span>
</a>
</li>
<li>
<a href="#">
<span>Row3Col1</span>
<span>Row3Col2</span>
</a>
</li>
</ul>
</div>
</div>

我能够在Bootstrap 4中得到一些工作，但即使这样也不能完全工作。

https://codepen.io/Falven/pen/bjVaGN

.dropdown-menu {
display: table;
}
.dropdown-item {
display: table-row;
}
.dropdown-item span {
display: table-cell;
}

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">
<span>Row1Col1</span>
<span>Row1Col2</span>
</a>
<a class="dropdown-item" href="#">
<span>Row2Col1</span>
<span>Row2Col2</span>
</a>
<a class="dropdown-item" href="#">
<span>Row3Col1</span>
<span>Row3Col2</span>
</a>
</div>
</div>

Answer 1

不要改变框架，在框架内工作。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<table class="table table-condensed">
<tr>
<th>File Name</th>
<th>Status</th>
</tr>
<tr>
<a href="#">
<td>Jill</td>
<td>Smith</td>
</a>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</div>
</div>
</div>