change height of a thead in a table

Question

Is there a way to change the height of a thead in a table? I have tried

$('thead').height('2px');

but to no avail, the height does not change.

What am I doing wrong? Thanks

Answer 1

This is probably browser dependent. Some browsers may treat the thead element as a container without any height of it's own. Try setting a height on the TH elements themselves, using Javascript or CSS. Note that to achieve something less than the height of a line, you'd also have to set the line height as a table element will resize to fit it's content.

$('thead th').css({ height: '2px', line-height: '2px' });

or

 <style>
    .header th {
       height: 2px;
       line-height: 2px;
    }
 <style>

 <table>
    <thead class="header">
        <th>Foo</th>
        ...
    </thead>
    ...
 </table>

As @Marco notes in his example, you can probably also force the THEAD to be treated as a block level element and set it's height directly. Depending on what you're trying to accomplish and what is in the row contained in the THEAD, this may or may not do what you want. More information on what you're trying to achieve may help us find the appropriate solution for you.

Answer 2

Seems to work fine.

http://jsfiddle.net/KWbxL/1/

Its displaying as a table, which cant have a LESS height, than its content. So if you need 2px height, you need to display:block and have overflow:hidden for hiding the content (which wont fit in the 2px).

And why not use CSS, instead of using JS to do your styling :)