tags:

views:

462

answers:

3

I have a style defined for tables. I then have a .tablestyle th { height:26px }...

I now have a need to have a particular (one not all) th in the table auto determine its height.

<table class="tablestyle">
<tr><th>Normal Stuff</th></tr>
<tr><th>Long Stuff</th></tr>
</table>

The long stuff th needs a height of x, where x > 26px, but unknown... I've tried placing a style attribute on the th tag saying "height:auto", but it doesn't seem to honor the auto assignment. If I put "height: 200px" in the style attribute, it works fine, going to 200px. The problem is that I really need the height to be determined based on content of the th...

I realize that I can make more specific styles and I'm fine. I'd like if possible, to simply decorate only the affected tag instead of creating a seperate style.

Additional information: This is for a tabular data input form, and we have the same need for td tags as well.

Thanks for your assistance.

+2  A: 

try to add !important at the end of your css attribute

Gregoire
A: 
min-height: 26px;

Will work for everything but IE. For IE, I typically use some jQuery:

if ($('stuff').height() < 26) { $('stuff').height(26); }

I think, I don't have my code in front of me.

mabwi
A: 

I realise that your experience is different to my own, but typically a table-cell (whether <th> or <td>) will adopt whatever height is required to display the content, regardless of the style-rules relating to height or overflow.

Are you using a doctype? I generally use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; in my pages, and the demo page (over at this page) seems to back this up.

The page there uses the following the markup:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style type="text/css" media="all">

table {width: 80%;
 margin: 1em auto;
 }

    tr,th,td
     {height: 40px;
     }

    th, td {border: 1px solid #f90;
     }

    </style>

</head>

<body>

<table>

<thead>
<tr><th>Names</th><th>Description</th><th>Actor</th></tr>
</thead>

<tbody>
<tr><td>Number One</td><td>The assumed leader of the Village</td><td>Perhaps Patrick McGoohan</td></tr>
<tr><td>Number Two</td><td>There are two Number Twos with repeat appearances: Leo McKern appeared in three episodes, and Colin Gordon in two. With the exception of "Fall Out", this was the result of the actors performing their roles in two consecutive episodes filmed back to back. Colin Gordon was filmed in "The General" followed immediately with "A. B. and C." McKern was featured in the series' second transmitted episode, "The Chimes of Big Ben," and then featured in the next production episode to be filmed "Once Upon a Time." Three actors who portray Number Twos also appear in other episodes, possibly as different characters — Georgina Cookson ("A. B. and C." as party guest and "Many Happy Returns" as Mrs Butterworth/No. 2), Kenneth Griffith ("The Girl Who Was Death" as Schnipps/No. 2 and "Fall Out" as The Judge) and Patrick Cargill ("Many Happy Returns" as Thorpe, and "Hammer Into Anvil" as No. 2) — although this is ambiguous, particularly in the case of Kenneth Griffith's character.</td><td>Patrick McGoohan</td></tr>
</tbody>

</table>

</body>

</html>

Conceivably, you could wrap the cell contents in a <span> and use that to enforce a particular height/width; but it does serve to complicate your markup somewhat.

David Thomas