Hiding a , while still involving it in width calculations

前端 未结 2 1012
耶瑟儿~
耶瑟儿~ 2020-12-17 14:38

There are search results stored in a table like the one below:

相关标签:
2条回答
  • 2020-12-17 14:46

    use CSS:

    tr {
        visibility: hidden;
    }
    
    0 讨论(0)
  • 2020-12-17 14:53

    If I've understood correctly you are looking for visibility: collapse; declaration:

    17.5.5 Dynamic row and column effects

    The visibility property takes the value collapse for row, row group, column, and column group elements. This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. Contents of spanned rows and columns that intersect the collapsed column or row are clipped. The suppression of the row or column, however, does not otherwise affect the layout of the table. This allows dynamic effects to remove table rows or columns without forcing a re-layout of the table in order to account for the potential change in column constraints.

    However it seems this is buggy on some of web browsers. The MDN states:

    The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

    Unfortunately it acts as visibility: hidden on Chrome37: Demo Here.

    But fortunately, you can fake the effect by line-height: 0 declaration:

    Updated Demo

    .hidden {
      visibility: collapse;
      line-height: 0; /* Set the height of the line box to 0
                         in order to remove the occupied space */
    }
    
    0 讨论(0)
提交回复
热议问题
Column One