Fixing table row height by using div in td

Question

I have a table. Some td's are empty, and some look like this:

<td><div class='divintd'>+</div></td>

Rows with non-empty td's get their height and width adjusted. I found from StackOverflow archive that placing td's in divs is about the only option. I implemented the code suggested here: How to fix height of TR? , but my table is still screwed up. What am I doing wrong and how can I fix this? CSS:

table td {
    width: 4px;
    height: 4px;
}

.divintd {
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
}

Answer 1

First Change

<td><div class='divintd'>+</div></td>

into

<div class='divintd'><td>+</td></div> 

.divintd td {
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
}