Grow your CSS skills. Land your dream job.

CSS: How to get all letter small-cap and first letter large.

  • # July 31, 2008 at 9:38 pm

    Hi

    I am trying to display my table header tab <TH> content with all first letter of each word to font-size:16px while the other letters in small-caps.

    I have tried halfway using the following which only display the first-letter in large-xx but the rest of all word and letters in uppercase.

    How to get all the first letters to 16px where the rest to 12px or small-caps.

    <style type="text/css">
    th:first-letter { text-transform: uppercase }
    th {color:#0000ff;font-variant:small-caps}
    </style>
    <TABLE>
    <TH ALIGN="left" VALIGN="bottom" COLSPAN="2" ROWSPAN="1" BGCOLOR="#00FFFF" NOWRAP>table header</TH>
    <TR>
    <TD>row1 col1</TD><TD>row1 col2</TD>
    </TR>
    </TABLE>

    Thank you and any help is appreciated.

    TIA

    # August 1, 2008 at 11:17 am

    Instead of using text-transform: uppercase on th:first-letter, instead just put the capital letter in yourself in the xhtml.

    Code:
    Table header

    then use this for your css:

    Code:
    th:first-letter{font-size:16pt;}
    th {font-size:12pt;font-variant:small-caps}
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".