正文

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

 2023-05-09  289

关键词：

【中文标题】列隐藏时固定表格布局调整大小【英文标题】：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	文件名	路径

谢谢，卡提克

【问题讨论】：

您想要的结果是什么？根据新的可用总宽度调整所有列的大小？谢谢，由于表格有边框，我需要摆脱空间。相反，我可以让最后一列调整布局的剩余大小。我不确定是否实现相同。不管怎样，我得把桌子右边的空间去掉。谢谢 【参考方案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 像素的大表格宽度。

固定行跨度和表格布局时的表格列宽

】固定行跨度和表格布局时的表格列宽【英文标题】：Tablecolumnwidthwhenhavingrowspanandtable-layoutfixe【发布时间】：2018-01-2501:42:48【问题描述】：我一直在固定我的html表格的第二列的宽度。下面是我的桌子的打印屏幕：下面是CSS代码... 查看详情

调整表格列的大小以填充所有可用空间

】调整表格列的大小以填充所有可用空间【英文标题】：Resizethecolumnofatabletofillalltheavailablespace【发布时间】：2012-03-0122:30:48【问题描述】：我在EclipseSWT中有这张表，有5列。我调整了窗口的大小以及整个表格的大小，但列没有调... 查看详情

在 NSWindow 手动调整大小之前，NSTableView 不会布局/调整列大小

...设置了所有正确的自动调整大小标志。但是，每次我重建表格的内容时，所有查看详情

表格调整大小时项目之间的表格布局面板空间

】表格调整大小时项目之间的表格布局面板空间【英文标题】：tablelayoutpanelspacebetweeniitemswhenformgetresize【发布时间】：2021-01-0206:00:14【问题描述】：正常尺寸当表单调整大小时它们之间会有空间而且还在不断变大！取决于这个表... 查看详情

使用固定大小的子视图和自动布局调整 UIView 的大小不起作用

】使用固定大小的子视图和自动布局调整UIView的大小不起作用【英文标题】：ResizingUIViewwithfixedsizedsubviewsandautolayoutdoesn\'twork【发布时间】：2015-07-0111:23:21【问题描述】：我正在尝试使用动态单元格高度制作表格视图。除一种情... 查看详情

word表格快捷技巧word表格快捷窍门

...中包括根据内容自动调整表格、根据窗口自动调整表格和固定列宽3个调整方法，它们分别有什么作用呢？下面将分别为大家介绍。（1）根据内容自动调整表格：顾名思义，应用该功能后，将会查看详情

在调整窗口大小或拆分器时更改表格列宽

】在调整窗口大小或拆分器时更改表格列宽【英文标题】：Changetablecolumnswidthonresizingwindoworsplitter【发布时间】：2010-03-2711:14:31【问题描述】：考虑有一个QTablWidget和一个QTextEdit。他们俩都在一个水平的QSplitte中。让QTable小部件有2... 查看详情

怎样使word表格的宽度高度固定不变

...定高度”，输入或调整高度值，将“行高值是”调整为“固定值”。3、单击“列”选项卡，勾选“指定宽度”，输入或调整宽度值，单击“确定”按钮。参考技术A1、选中整个表格。右键－“表格属性”2、在表格属性对话框，... 查看详情

隐藏子小部件时，QGridLayout 未调整大小或重新绘制

】隐藏子小部件时，QGridLayout未调整大小或重新绘制【英文标题】：QGridLayoutnotresizednorrepaintedwhenchildwidgetsgethidden【发布时间】：2018-02-0209:16:01【问题描述】：我有一个小部件，其中QVBoxLayout作为主布局，QGridLayout作为嵌套在主布... 查看详情

使用自动布局进行编辑时在表格视图中调整子视图的大小

】使用自动布局进行编辑时在表格视图中调整子视图的大小【英文标题】：Resizesubviewsintableviewwheneditingusingautolayout【发布时间】：2012-11-0718:40:02【问题描述】：我有一个带有原型单元格的表格视图。目前我只在单元格中添加了一... 查看详情

隐藏列后如何调整 JQuery/Datatable 的大小

】隐藏列后如何调整JQuery/Datatable的大小【英文标题】：HowtoresizeaJQuery/Datatableafterhidingcolumns【发布时间】：2011-07-0320:22:26【问题描述】：我正在使用JQuery的DataTables插件，我的问题基本上在于我的数据表有很多列并且（视觉上）超... 查看详情

具有固定列和流动列的 CSS 布局

...局必须具有100%的宽度和高度，但不应有滚动条（溢出：隐藏；）。上图显示了我想要实现的目标。如您所见：标题必须固定-110像素，宽度为100%。通过容器div包装的两个div。蓝色需要固定宽度130像素和100%高度，而绿色需查看详情

隐藏/禁用 DataGridView 列/行调整大小行

】隐藏/禁用DataGridView列/行调整大小行【英文标题】：Hide/DisableDataGridViewColumn/RowResizingLine【发布时间】：2020-08-2314:53:12【问题描述】：是否有人知道在调整datagridview行和列的大小时禁用出现的行的方法。这条线闪烁很多，所以我... 查看详情

如何设置数据网格列以填充数据网格集以填充和布局自动调整大小的网格？

...下面我有一个包含2个相等数据网格的示例。两者都有1个固定列（代码）和1个用*大小（描述）设查看详情

使用自动布局时标签不会调整大小，情节提要中的约束

...时间】：2014-10-1205:56:06【问题描述】：在纵向模式下查看表格时，表格视图自定义单元格中的我的标签不会调整大小使用Xcode6，beta5-Swift语言。运行模拟器iPhone5s在这个新的Xcode中，ViewController 查看详情

启用自动布局的 iOS 调整视图大小

...是我拥有的给定视图，右图是我想要实现的-基本上只是隐藏导航栏并调整所有内容的大小。目前的解决方案目前我已经设法使用从搜索框到超级视图顶部属性的垂直空间约束来隐藏和调整所有内容-默认约束常量为44（导查看详情

固定数据表调整大小示例：无法调整列大小

】固定数据表调整大小示例：无法调整列大小【英文标题】：Fixed-data-tableresizeexample:Cannotresizecolumns【发布时间】：2017-06-2712:01:38【问题描述】：我正在使用Facebook在此处显示的示例：https://facebook.github.io/fixed-data-table/example-resize.h... 查看详情

QtDesigner：设置 QLabel 的固定大小

】QtDesigner：设置QLabel的固定大小【英文标题】：QtDesigner:SettingfixedsizeofQLabel【发布时间】：2012-10-1710:53:32【问题描述】：我在QtDesigner表单上有一个固定大小的标签。标签用于显示图像，假设它用于显示100x100像素的缩略图。我可... 查看详情