10 Replies Latest reply: Jul 13, 2014 8:22 PM by broomeGirl RSS

    table header not styling

    broomeGirl Community Member

      Hi I cant get the table header to call the css style.  This is the css

      th {

          font: 1.4em "Helvetica Neue", Helvetica, Arial, sans-serif!important;

          text-decoration:underline!important;

          color:#ff0000!important;}

       

      This is the html

       

      <table width="400" border="0" cellspacing="10" cellpadding="10" summary="Rates for ???? bike hire for both geared and kids bikes.">

        <caption>

          Bike Hire

        </caption>

        <tr>

          <th scope="col">Geared Bikes</th>

          <th scope="col"> </th>

          <th scope="col">Kids Bikes</th>

          <th scope="col"> </th>

        </tr>

        <tr>

          <td>1 day</td>

          <td>$24</td>

          <td>1 day</td>

          <td>$14</td>

        </tr>

       

       

      Where am I going wrong?  Appreciate your support.

       

      Let me know if you need the url.

        • 1. Re: table header not styling
          John Waller CommunityMVP

          Let me know if you need the url.

          Yes please.

          • 2. Re: table header not styling
            mytaxsite.co.uk CommunityMVP

            I tried your code and it works on my machine:  This is the code I created on my machine:

             

            <!DOCTYPE html>
            <html>

            <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Untitled 1</title>
            <style media="all" type="text/css">
            th {
            font: 1.4em "Helvetica Neue", Helvetica, Arial, sans-serif;
            text-decoration: underline;
            color: #ff0000;
            }
            </style>
            </head>

            <body>

            <table border="0" cellpadding="10" cellspacing="10" summary="Rates for ???? bike hire for both geared and kids bikes." width="400">
            <caption>Bike Hire </caption>
            <tr>
              <th scope="col">Geared Bikes</th>
              <th scope="col"></th>
              <th scope="col">Kids Bikes</th>
              <th scope="col"></th>
            </tr>
            <tr>
              <td>1 day</td>
              <td>$24</td>
              <td>1 day</td>
              <td>$14</td>
            </tr>
            </table>

            </body>

            </html>

             

            And this is what I see in the browser:

             

            2014-07-13_0254.png

             

            Hope this helps.

            • 3. Re: table header not styling
              broomeGirl Community Member

              Thanks to both of you!  So strange, I have tested in both Firefox and Safari and yet the table headers remain unstyled.  This is the url:  http://bit.ly/1m5AjFKhttp://

               

              I would have thought that any other inherited styling would have been over-ridden by the important tag.

               

              This is what I see

               

              Screen Shot 2014-07-13 at 10.35.14 am.png

              • 4. Re: table header not styling
                mytaxsite.co.uk CommunityMVP

                There is a problem in your style code.  This code isn't correct:

                 

                table tbody tr th {

                font: 1.4em "Helvetica Neue", Helvetica, Arial, sans-serif!important;

                text-decoration:underline!important;

                color:#ff0000!important;}

                 

                I would just change it to:

                 

                th {

                font: 1.4em "Helvetica Neue", Helvetica, Arial, sans-serif!important;

                text-decoration:underline!important;

                color:#ff0000!important;}

                Good luck.

                • 5. Re: table header not styling
                  mytaxsite.co.uk CommunityMVP

                  !important is to over-ride any specificity you might have on the page.  For example, you might have something like this:

                   

                  #example {
                  font-size: 14px !important;
                  }

                  #container #example {
                  font-size: 10px;
                  }

                   

                  In the absence of !important, the font size will be 10px for a div called ID example but by using !important, the second declaration CAN'T over-ride the first.  In normal cases that is what happens but in this case it can't because of the word !important.  I hope you get the idea.

                  • 7. Re: table header not styling
                    broomeGirl Community Member

                    Thanks for all your responses.  I know what important does, this is not the problem and the above code was changed back to th .. I was just trying to be really really specific but I knew just th would do it.

                     

                    I just cant work out why it is not working.

                     

                    It should be straight forward.

                    • 8. Re: table header not styling
                      broomeGirl Community Member

                      YAY! I found it .. there was a semi colon after the last css statement

                       

                      caption {

                          padding:0 0 10px 0;

                          font: 2em "Helvetica Neue", Helvetica, Arial, sans-serif;

                          color:#77ff23;};

                         

                      th {

                          font: 1.4em "Helvetica Neue", Helvetica, Arial, sans-serif!important;

                          text-decoration:underline!important;

                          color:#ff0000!important;}

                       

                      Thanks all for trying!

                      • 9. Re: table header not styling
                        MurraySummers CommunityMVP

                        A misplaced semicolon like that spoils everything else below as you discovered. The very specific selector you originally specified for the th style should have worked fine assuming all of your tables contain a <tbody> tag, and that you have removed the extra semicolon.

                        • 10. Re: table header not styling
                          broomeGirl Community Member

                          Yep knew it was something I did stupid like the colon.  Thanks for your support, very much appreciated!