html - Bootstrap 下拉列表中的表格

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>