html - Bootstrap 表使 TR 中的显示元素不展开

标签 html css twitter-bootstrap knockout.js html-table

我用 knockout 和 bootstrap 构建了一个表来显示动漫条目。可以通过单击列名对其进行排序。但是,当您这样做时,单元格会扩展以容纳 i display: inline from display: none 后的箭头。如何更改 CSS,使箭头显示在单元格上但不会展开?

此处演示:http://animelistmvc.apphb.com/AnimeList/Explore

HTML:

<div class = "table-responsive">
             <table class="table table-striped table-bordered table-condensed ko-grid" cellspacing="0">
                  <thead>
                      <tr data-bind="foreach: columns" class="disableSelection">
                           <th>
                            <!-- $parent header is required inside a foreach loop -->
                           <a id="headerTitle" data-bind="text: headerText, click: $parent.sortTable"></a>
                           <span data-bind="attr: { class: $parent.currentColumn() == headerText ? 'isVisible' : 'isHidden' }">
                           <i data-bind="attr: { class: $parent.iconType }"></i>
                           </th>
                      </tr>
                  </thead>
                  <tbody data-bind="foreach:itemsOnCurrentPage">
                  <tr data-bind="foreach: $parent.columns">
                            <!-- ko if: rowId-->
                                <td><a data-bind="attr: { href: rowAction + '/' + $parent[rowId]}"><span data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></a></td>
                            <!--/ko-->
                            <!-- ko if: rowText && !rowId-->
                                <td><span data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></span></td>
                            <!--/ko-->
                            <!-- ko if: rowImage-->
                                <td align="center"><img width="100" height="100" data-bind="attr:{src: $parent[rowImage]}" /></td>
                            <!--/ko-->
                  </tr>
                  </tbody>
             </table>
           </div>

CSS:

.isVisible {
    display: inline;
    float: right;
}

.isHidden {
    display: none;
}

#headerTitle {
    cursor: pointer;
}

.disableSelection {
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

最佳答案

如果箭头的 CSS 定位是绝对的,文档将不会占其在流中的空间。使包含它的 th position:relative 并将 isVisible 箭头的 css 设置为

  position: absolute;
  right: 10px;
  float: none;

调味。

关于html - Bootstrap 表使 TR 中的显示元素不展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30632353/

相关文章:

javascript - 表单中的最小长度验证不起作用

css - 图像在确定高度的中心位置

html - Bootstrap 导航栏更改高度

jquery - 带 Bootstrap 的两列 Accordion

javascript - Bootstrap 弹出窗口,关闭按钮

javascript - 当我使用 Javascript 时,ID 接管了我的类(class)

html - Outlook 2007 邮件跨度未显示在同一行中

javascript - datalist如何判断下拉列表中是否选择了输入

用于创建网页的 PHP 脚本无法正常工作

html - 在图像( map )上自定义绝对定位的 FontAwesome 标记