Why doesn't jQuery return the correct border properties of a thead element, and is there a workaround?

Question

As demonstrated in this jsFiddle, jQuery's css function doesn't return the border width/style/color of a <thead> element in a simple table:

$("thead").css("border-top-width") // returns 0px

If I try the same thing on a div, it works fine:

$("div").css("border-top-width") // returns 1px (or whatever the border width is)

Why doesn't this work? Is there another way to get the border details? I'm using Firefox if that makes a difference.

Answer 1

Why doesn't this work?

because your <thead> element is displayed has a pseudo element.

Make it 'display: block' and border will appear

thead {display:block}

NOTA: Display:block on tHead might have a side effect. Ask your doctor for recommendations about 'setting in float' a browser pseudo element. For experience, setting display:block on a <tbody> tag made it's inner content (tr td) floating left, so making the <table width="100%"> didn't apply on inner <td> width.