CODEWITHSUNDEEP
jqueryhtmljquery-selectorshtml-table
Null Head
Null Head

Reputation: 2941

HTML - Cant set <TD> Height properly with jQuery

In my table, I would like to keep all rows' height even and so I am setting td height with the following jQuery script

$(document).ready(function() {
            $(".striped tr").css("min-width", "540px").css("padding-left", "5px");
            $(".striped tr:odd").css("background-color", "#EDEDED");
            $(".striped").css("font-size", "13px");
            $(".striped td").css("min-height", "26px").css("vertical-align", "middle").css("display", "block");            
        });

Page looked like this before the script is applied:
enter image description here

after script is applied:
enter image description here

Where is the mistake?

Upvotes: 0

Views: 3400

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34855

Remove css("display", "block")

It's causing the td elements to be block level and to be bumped under each other.

Upvotes: 1

SLaks
SLaks

Reputation: 887215

Table cells have display: table-cell.

Setting display: block causes them to be treated as normal elements, not table cells.

Upvotes: 1

Related Questions