列隐藏时固定表格布局调整大小
Posted
技术标签:
【中文标题】列隐藏时固定表格布局调整大小【英文标题】: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>
内换行,因为它们算作子节点。
【讨论】:
我错过了它的实际名称,以上是关于列隐藏时固定表格布局调整大小的主要内容,如果未能解决你的问题,请参考以下文章