相关疑难解决方法(0)

搜索结果存储在如下表格中:

<table>
    <tbody>
        <tr>
            <td>Column One</td>
            <td>Column Two</td>
            <td>Column Three</td>
        </tr>
    </tbody>
</table>

实际的表包含更多的数据(包括列和行),并且是流体宽度.由于数据是可变的,我希望table-layout保留auto,因为它处理自动调整(这在javascript中为1000行执行会很昂贵和复杂).

此表也由实时搜索小部件过滤,该小部件通过添加隐藏与查询不匹配的行display: none;.但是,我发现这通常会导致重新计算列宽(通常会导致列宽度出现一些不和谐的跳跃).这是有道理的,因为行可能只包含计算,如果有的话display: table-row;.但这不是我追求的行为.

是否可以隐藏<tr>视图,但是仍然将它包含在列表浏览器上完成的列宽度计算中(例如,在调整大小时)table-layout: auto;？

我已经尝试过设置height: 0;(和max-height: 0;),但是从其他SO问题中学到了这不起作用因为display: table-cell;.同样,设置line-height: 0;失败,但我认为它会因为我的一些列有块内容.

我也考虑过在<td>s 上明确设置宽度,但这会使表保持流畅(我必须在调整大小时删除显式宽度,这可能会导致宽度跳跃,除非所有行都可见,否则无法工作并包含在浏览器的表中调整大小计算).

编辑:澄清一下,通过隐藏视图我的意思是隐藏在意义上display: none;,而不是visibility: hidden;.如果元素在隐藏时不保留原始高度,后者将起作用,但不幸的是情况并非如此.

注意:我知道乍一看这似乎是一个非常狭隘的问题,但我相信这可能是一个常见的用例.因此,我加粗了问题中最适用的部分(阅读:最重要).其余的(对我来说稍微具体)比其他任何东西更具说明性.

我是网络编程的新手,所以我可能在这里犯了一些明显的错误.

当我试图在诸如rows [i] .style.display ='none'之类的javascript中隐藏表中的行时,表格布局会完全破坏.最初,细胞内容被包裹起来,桌子的宽度也在缩小.然后我在table标签中添加了style ="table-layout:fixed",并在每个td中添加了style ="white-space:nowrap".这会阻止换行,但内容仍然没有在一行上对齐.如果空间和列宽从一行到另一行变化,则单元格开始向左移动.然后,我为每个th和td元素以及包含该表的div添加了固定宽度.问题仍然存在.

我目前的HTML类似于以下内容.

<div style="width: 300px">
  <table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed"> 
    <tr id="HeaderRow">
      <th style="width: 100px;">Header 1</th>
      <th style="width: 50px;">Header 2</th>
      <th style="width: 150px;">Header 3</th>
    </tr>
    <tr id="DetailRow1">                                        
      <td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
      <td style="white-space:nowrap; width: 50px;">Data 1_2  in Row 1</td>
      <td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
    </tr>
    <tr id="DetailRow2">                                        
      <td style="white-space:nowrap; width: 100px;">Data 2</td>
      <td style="white-space:nowrap; width: 50px;">Data 2</td>
      <td style="white-space:nowrap; width: 150px;">Data 2</td>
    </tr>
    <tr id="DetailRow3"> …