Geek Answers Handbook

HTML Table Cells - Hiding a Single Cell

I have an html table that I set in the column formation of 3 rows of 2. Thus, basically there are 6 cells that are currently displayed for suer.

My question - uncertainty about how to do this, is that I want to use only 5 cells that are visible only to the user, so I need to somehow remove the position of the cell (3,2) so that it does not display any borders in all for this cell - can this be done, if so, how?

Thanks.

+5
source share
4 answers

find the css border-collapse and empty-cells properties

Link: http://www.quirksmode.org/css/tables.html

Scroll down the page and see examples of empty-cells:hide , also check the browser compatibility chart at the top of the page.

+4
source

Try setting CSS in the cell you want to hide before visbility: hidden; - this will not show the cell, but it will still take its place. See Link: http://www.w3schools.com/cssref/pr_class_visibility.asp

+3
source

Suppose you have cell 3.2 as

 <td id="cell32">cell data</td>

If you want to hide it, do

 cell32 = document.getElementById("cell32"); cell32.style.display = "none";

However, if you hide the middle cell, your other cells will move to the left. To preserve the structure of the table, you need to replace the hidden cell with a special cell that has empty (&nbsp;) content, and without borders.

+2
source

use the css empty-cells property to remove unnecessary / empty cells from the table. When empty-cells: hide , empty cells will be completely removed from the table view, as shown below,

table

moreover, when empty-cells: hide and you still want to display some empty cells, you can override the behavior using &nbsp; in empty cells. For more information you can visit MDN

0
source

More articles:


All Articles