HTML Label to fill cell height, with some form of padding

Question

I am trying to get a label to fill a table cell whilst having some sort of padding applied to the label.

I have tried a method I found through my searches but this does not seem to work... here is my CSS:

tr {
    height: 1px;
}

td {
    height:100%;        
}

label {
    background-color: #DCDCDC;
    display: block; 
    font-weight:bold;
    vertical-align:top;
    text-align:right;  
    padding: 8px 5px 8px 8px;
    margin:  1px 3px 1px 0px;     
    min-width: 120px;
    min-height:100%;    
    height:auto !important;
    height:100%;
}

Any help with this would be gratefully appreciated

Answer 1

From the given CSS it looks like there may be browser default padding on the table cells.

td {padding: 0;}
label {display: block; padding: 1em;}

seems to do the trick for me : http://jsfiddle.net/Fb7bS/

But a more complex table and/or inherited styles from elsewhere may add complications.