停止下拉屏幕

Question

我有以下内容用于显示自定义表格。它的工作原理很好，但我在表头中有下拉菜单时遇到了一些麻烦。

＆＃13;

＆＃13;

.as-table {
  position: relative;
}
.as-table-head {
  background-color: rgb(30, 36, 42);
  width: 100%;
}
.as-table-head > tr > th {
  color: white;
  font: bold 13px/15px"Trebuchet MS", "Helvetica Neue", "HelveticaNeue", "Helvetica", "Lato", Arial, "Lucida Grande", sans-serif;
  padding: 0 !important;
  height: 30px;
}
.as-table-head > tr > th:hover {
  background-color: #333e48;
}
.as-table-head > tr > th > div > button {
  padding: 0;
  background-color: rgb(30, 36, 42);
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
.as-table-head > tr > th > div > button:hover {
  background-color: #333e48;
  border-color: #333e48;
}
.as-table-head > tr > th > div > button:hover {
  background-color: #333e48;
  border-color: #333e48;
}
.as-table-head-dropdown-arrow {
  visibility: hidden;
}
.as-table-head > tr > th:hover .as-table-head-dropdown-arrow {
  visibility: visible;
}
.as-table-dropdown-container {
  padding: 4px;
  border-radius: 0;
}
.as-table-dropdown-container:focus {
  background-color: #eff0f1;
}
.as-table-dropdown-container:focus .as-table-head-dropdown-arrow {
  visibility: visible;
}
.as-table-head-dropdown-arrow:focus {
  background-color: #eff0f1;
}
.as-table-head > tr > th > div > button > span {
  color: white;
  font: bold 13px/15px"Trebuchet MS", "Helvetica Neue", "HelveticaNeue", "Helvetica", "Lato", Arial, "Lucida Grande", sans-serif;
  padding: 0 !important;
  height: 30px;
}
.as-table-dropdown {
  background-color: #E9EAEB;
  right: auto !important;
  top: 28px;
  border: 0;
}
.as-table-dropdown > li > a:hover {
  background-color: rgb(214, 215, 217);
  color: #333;
}
.as-table-head .valigned:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.as-table > tbody > tr > td {
  padding: 3px;
  font: normal 13px"Trebuchet MS", "Helvetica Neue", "HelveticaNeue", "Helvetica", "Lato", Arial, "Lucida Grande", sans-serif;
}
.as-table > tbody > tr:hover td {
  background-color: rgb(214, 215, 217);
}
.as-table > tbody > tr:focus td {
  background-color: rgb(124, 152, 171);
}
.as-table > tbody > tr:focus {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped as-table">
  <thead class="as-table-head">
    <tr>
      <th class="valigned">
        <input type="checkbox" name="checkBoxHead" class="as-table-checkbox-head">
      </th>
      <th class="valigned"> <span>Connected</span>

        <div class="btn-group pull-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
      <th class="valigned"> <span>Mac Address</span>

        <div class="btn-group pull-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
      <th class="valigned"> <span>Enabled</span>

        <div class="btn-group pull-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
      <th class="valigned"> <span>IP Address</span>

        <div class="btn-group pull-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
      <th class="valigned"> <span>CName</span>

        <div class="btn-group pull-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>
        <img src="~/Content/img/connecting" />
      </td>
      <td>00:8f:5e:aa:bb:00</td>
      <td>Status</td>
      <td>192.168.1.1</td>
      <td>23:23:23:23:23:2323:23:23:23:23:2323:23:23:23:23:23</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

您可以看到下拉列表如何显示在表格标题下方，但最后一个显示在屏幕外。我希望它出现在下面的图像中，菜单从屏幕的左边缘移动，但是没有找到如何做的运气：

任何帮助将不胜感激！

修改

我有以下哪个有效，但感觉错误..

jsfiddle

我将此类添加到最后一个<th>元素：

.as-last-th {
    right: 0 !important;
}

Answer 1

要做到这一点＆＃34;正确的＆＃34;办法。尝试

.as-table-dropdown:last-child {
    right: 0 !important;
}

这将确保具有类名.as-table-dropdown的最后一个元素将具有给定的属性。我没有看到代码执行有什么问题。但是我相信你可以清理CSS并在这个过程中使用一些JavaScript来使条形图更加动态。

Answer 2

可能有很多方法可以实现这一目标。我使用了bootstrap类（而不是使用!important的自定义类，这可能变得复杂且难以维护），我必须承认我并非100％确定我已经使用它们，因为它们是意图。

1. 由于depreciated "pull-right"，我改为bootstrap 3.1.0，其reported issue。
2. 我从right删除了.as-table-dropdown声明。
3. 我使用.navbar-right将.btn-group个元素浮动到右侧。
4. 然后我应用了.dropdown-menu-left或.dropdown-menu-right以适当地左下方对齐下拉列表。
＆＃13;
＆＃13;
.as-table {
  position: relative;
}
.as-table-head {
  background-color: rgb(30, 36, 42);
  width: 100%;
}
.as-table-head > tr > th {
  color: white;
  font: bold 13px/15px"Trebuchet MS", "Helvetica Neue", "HelveticaNeue", "Helvetica", "Lato", Arial, "Lucida Grande", sans-serif;
  padding: 0 !important;
  height: 30px;
}
.as-table-head > tr > th:hover {
  background-color: #333e48;
}
.as-table-head > tr > th > div > button {
  padding: 0;
  background-color: rgb(30, 36, 42);
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
.as-table-head > tr > th > div > button:hover {
  background-color: #333e48;
  border-color: #333e48;
}
.as-table-head > tr > th > div > button:hover {
  background-color: #333e48;
  border-color: #333e48;
}
.as-table-head-dropdown-arrow {
  visibility: hidden;
}
.as-table-head > tr > th:hover .as-table-head-dropdown-arrow {
  visibility: visible;
}
.as-table-dropdown-container {
  padding: 4px;
  border-radius: 0;
}
.as-table-dropdown-container:focus {
  background-color: #eff0f1;
}
.as-table-dropdown-container:focus .as-table-head-dropdown-arrow {
  visibility: visible;
}
.as-table-head-dropdown-arrow:focus {
  background-color: #eff0f1;
}
.as-table-head > tr > th > div > button > span {
  color: white;
  font: bold 13px/15px"Trebuchet MS", "Helvetica Neue", "HelveticaNeue", "Helvetica", "Lato", Arial, "Lucida Grande", sans-serif;
  padding: 0 !important;
  height: 30px;
}
.as-table-dropdown {
  background-color: #E9EAEB;
  /*right: auto !important;*/
  top: 28px;
  border: 0;
}
.as-table-dropdown > li > a:hover {
  background-color: rgb(214, 215, 217);
  color: #333;
}
.as-table-head .valigned:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.as-table > tbody > tr > td {
  padding: 3px;
  font: normal 13px"Trebuchet MS", "Helvetica Neue", "HelveticaNeue", "Helvetica", "Lato", Arial, "Lucida Grande", sans-serif;
}
.as-table > tbody > tr:hover td {
  background-color: rgb(214, 215, 217);
}
.as-table > tbody > tr:focus td {
  background-color: rgb(124, 152, 171);
}
.as-table > tbody > tr:focus {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped as-table">
  <thead class="as-table-head">
    <tr>
      <th class="valigned">
        <input type="checkbox" name="checkBoxHead" class="as-table-checkbox-head">
      </th>
      <th class="valigned"> <span>Connected</span>

        <div class="btn-group navbar-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu dropdown-menu-left as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
      <th class="valigned"> <span>Mac Address</span>

        <div class="btn-group navbar-right">
          <a class="btn dropdown-toggle  dropdown-menu-right as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu dropdown-menu-left as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
      <th class="valigned"> <span>Enabled</span>

        <div class="btn-group navbar-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu dropdown-menu-left as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
      <th class="valigned"> <span>IP Address</span>

        <div class="btn-group navbar-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu dropdown-menu-left as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
      <th class="valigned"> <span>CName</span>

        <div class="btn-group navbar-right">
          <a class="btn dropdown-toggle as-table-dropdown-container" data-toggle="dropdown" href="#">
            <img class="as-table-head-dropdown-arrow" src="http://uniqsource.com/wp-content/uploads/2014/07/small-black-down-arrow.png">
          </a>

          <ul class="dropdown-menu dropdown-menu-right as-table-dropdown">
            <li><a href="">Sort Ascending</a>

            </li>
            <li><a href="">Sort Descending</a>

            </li>
          </ul>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>
        <img src="~/Content/img/connecting" />
      </td>
      <td>00:8f:5e:aa:bb:00</td>
      <td>Status</td>
      <td>192.168.1.1</td>
      <td>23:23:23:23:23:2323:23:23:23:23:2323:23:23:23:23:23</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;