HTML 表格单元格 - 隐藏一个单元格
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3643092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Table Cells - Hiding One Cell
提问by tonyf
I have a html table that I have setup in a 3 rows by 2 column formation. So basically have 6 cells that are currently being displayed to the suer.
我有一个 html 表,我设置了 3 行 x 2 列。所以基本上有 6 个单元格当前正在显示给 suer。
My question is an unsure how to do, is that I only want to use 5 cells only visible to the user so would like to somehow remove cell position (3,2), so that it doesn't show any borders at all for that cell alone - can this be done, if so, how?
我的问题是不确定该怎么做,是我只想使用仅对用户可见的 5 个单元格,所以想以某种方式删除单元格位置 (3,2),以便它根本不显示任何边框单独的单元格 - 可以这样做吗,如果可以,怎么做?
Thanks.
谢谢。
采纳答案by Moin Zaman
look up the css properties border-collapse
and empty-cells
查找 css 属性border-collapse
和empty-cells
Ref: http://www.quirksmode.org/css/tables.html
参考:http: //www.quirksmode.org/css/tables.html
Scroll down the page and look at the examples of empty-cells:hide
also check the browser compatibility chart at the top of the page.
向下滚动页面并查看页面empty-cells:hide
顶部的浏览器兼容性图表的示例。
回答by user1343331
Try setting the CSS on the cell you want to hide to visbility: hidden;
- that will not show the cell, but it'll still take up space. See the reference: http://www.w3schools.com/cssref/pr_class_visibility.asp
尝试在要隐藏的单元格上设置 CSS visbility: hidden;
- 这不会显示单元格,但它仍会占用空间。见参考:http: //www.w3schools.com/cssref/pr_class_visibility.asp
回答by Mike
Let's assume you have cell at 3,2 as
假设您在 3,2 处有单元格
<td id="cell32">cell data</td>
When you want to hide it, then execute
当你想隐藏它时,然后执行
cell32 = document.getElementById("cell32");
cell32.style.display = "none";
However if you hide a middle cell, your other cells will shift left. To preserve table structure, you need to replace hidden cell with a special cell having empty ( )
content and no borders as you want.
但是,如果您隐藏中间的单元格,则其他单元格将向左移动。要保留表格结构,您需要根据需要将隐藏单元格替换为具有empty ( )
内容且没有边框的特殊单元格。
回答by Kiran Maniya
use css
property empty-cells
to remove unwanted/empty cells from table. When the empty-cells: hide
used, the empty cells will be completely erased from the table view as shown,
使用css
属性empty-cells
从表中删除不需要的/空单元格。当empty-cells: hide
使用时,空单元格将被完全从表视图如图所示擦除,
moreover, when the empty-cells: hide
and still you want to display some of the cells which are empty, you can override the behavior by using
in empty cells. for more information, you can visit MDN
此外,当empty-cells: hide
您仍然想要显示一些空单元格时,您可以通过
在空单元格中使用来覆盖该行为。有关更多信息,您可以访问MDN