CODEWITHSUNDEEP
htmlcss
tonyf
tonyf

Reputation: 35577

HTML Table Cells - Hiding One Cell

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.

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?

Thanks.

Upvotes: 5

Views: 33542

Answers (4)

Kiran Maniya
Kiran Maniya

Reputation: 9009

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,

table

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

Upvotes: 1

user1343331
user1343331

Reputation: 139

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

Upvotes: 4

Mike
Mike

Reputation: 1164

Let's assume you have cell at 3,2 as

<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 (&nbsp;) content and no borders as you want.

Upvotes: 2

Moin Zaman
Moin Zaman

Reputation: 25455

look up the css properties border-collapse and empty-cells

Ref: 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.

Upvotes: 4

Related Questions