Question

我用knockout和bootstrap构建了一个表来显示动画条目。单击列名称可以排序。但是，当您这样做时，单元格会在我显示之后展开以容纳箭头：fromline 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;
}

Answer 1

如果箭头的CSS定位是绝对的，则文档将不考虑其在流中的空间。制作包含="javascript:void(window.open('http://rd-sql.rossdown.local/ReportServer?" & "%2fSupportFolder%2fItem+Details&rs:Command=Render&prmItemKey=" & Fields!ItemKey.Value & "'))"的{{1}}并将isVisible箭头的css设置为

th

品尝季节。

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

1 个答案: