CODEWITHSUNDEEP
htmlcss
Shelby115
Shelby115

Reputation: 2867

Hidden cells in html table causing larger row height

So I have an HTML Table that is acting as a summary table for a list of things I need to display. I have only 4 columns showing but there are approx. 20 and they're currently set to display: none;. The problem is those hidden cells are causing rows to be larger than the visible ones need. (I Would just delete the hidden ones but later functionality dictates that user's will need to be able to make those cells/columns visible)

Question: Is there a way to make the row's height as tall as the visible ones need (and nothing more) and adjust as cells/columns visibility change?

Current CSS:

table.grid {
    border-collapse: collapse;
}

table.grid tr td {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    white-space: nowrap;
    vertical-align: top;
}

table.grid tr td input {
    display: block;   
}

With this I've successfully eliminated the horizontal white-space between cells but I need to eliminate the vertical space now and I'm not sure how to overcome this little hiccup.

Upvotes: 0

Views: 225

Answers (1)

JayD
JayD

Reputation: 6521

Try this on your hidden cells.

.class{
  display:none;
  line-height:0;
}

Upvotes: 1

Related Questions