I have a html table that I have setup in a 3 rows by 2 column f开发者_如何学Cormation. 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.
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.
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
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 ( )
content and no borders as you want.
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,
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
精彩评论