列隐藏时固定表格布局调整大小

Posted 2023-05-09

【中文标题】列隐藏时固定表格布局调整大小

【英文标题】：fixed table layout resize when column is hiding

【发布时间】：2011-05-14 15:42:41

【问题描述】：

我有一个固定的表格布局，宽度为 425 像素。这是一个有 200 行的表。当用户取消选择指定列的复选框时，该列被隐藏。当列被隐藏时，表格在隐藏列上留下空间，并且调整其他列的宽度。 有人可以指出我的解决方法吗？

  <script type="text/javascript">
   var showMode = 'table-cell';  
   if (document.all) showMode='block';  

     function toggleVis(btn)   
         btn   = document.forms['tcol'].elements[btn];  
         cells = document.getElementsByName('t'+btn.name);  
         mode = btn.checked ? showMode : 'none';  
         for(j = 0; j < cells.length; j++)  
              cells[j].style.display = mode;  
        

还有html和css

   .sortable width: 425px;border: 2px solid #900;border-collapse:collapse;table-layout: fixed
 .sortable th text-align:left;border: 1px solid #fff
 .sortable thead th.sub0 text-align: center;color:#fff;font-size:115%;background: #88b8db repeat-x 0 -1400px;padding: 2px
 .sortable tbody th.sub0 text-align: center;font-size:90%;color:#000;background: #efefef repeat-x 0 -100px;padding: 5px
 .sortable tbody th.sub1 word-wrap:break-word;text-align: left;font-size: 90%;color: #000;background: #efefef repeat-x 0 -100px;padding: 6px

ID	文件名	路径

显示列 Id 文件名 路径

谢谢， 卡提克

【问题讨论】：

您想要的结果是什么？根据新的可用总宽度调整所有列的大小？

谢谢，由于表格有边框，我需要摆脱空间。相反，我可以让最后一列调整布局的剩余大小。我不确定是否实现相同。

不管怎样，我得把桌子右边的空间去掉。谢谢

【参考方案1】：

cells = document.getElementsByName('t'+btn.name)

看：

<th class="sub0"  id="tcol1">ID

<th class="sub0"  id="tcol2">File Name

<th class="sub0"  id="tcol3">Path

你有 id 而不是 name

无论如何它不会做你想做的事。

编辑

这对我有用：

<style>
  table  width: 425; background-color: #eee;
  td, th  background-color: #ddd 
</style> 

<script type="text/javascript">

function toggleVis(btn)

  var col = btn.name.substring(3);
  var tr = document.getElementsByTagName ( "tr" );
  if ( btn.checked )
  
    for ( var i=0; i < tr.length; i ++)
    
      tr[i].childNodes[col-1].style.display = "table-cell";
    
  
  else
     
    for ( var i=0; i < tr.length; i ++)
    
      tr[i].childNodes[col-1].style.display = "none";     
    
  
   
</script>

<table> 
  <thead>
    <tr><th class="sub0"  id="tcol1">ID</th><th class="sub0"  id="tcol2">File Name</th><th class="sub0"  id="tcol3">Path</th></tr>
  </thead>
  <tbody>
    <tr><td>0</td><td>file_0</td><td>dir_0/file_0</td></tr>
    <tr><td>0</td><td>file_1</td><td>dir_1/file_1</td></tr>
    <tr><td>0</td><td>file_2</td><td>dir_2/file_2</td></tr>
    <tr><td>0</td><td>file_3</td><td>dir_3/file_3</td></tr>
  </tbody>
</table>

<br/>

<form name="tcol" onsubmit="return false">
  Show Columns
  <input type=checkbox name="col1" onclick="toggleVis(this)" checked="checked"/>Id
  <input type=checkbox name="col2" onclick="toggleVis(this)" checked="checked"/>File Name
  <input type=checkbox name="col3" onclick="toggleVis(this)" checked="checked"/>Path
</form>

我不会因为空格而在<tr></tr> 内换行，因为它们算作子节点。

【讨论】：

我错过了它的实际名称，

ID

看看我的代码。表格宽 425 像素。如果没有显示任何列，则其余的填充空白。

谢谢，代码有效。让我尝试将示例代码扩展到具有 11 列和 300 行的 1250 像素的大表格宽度。