0

I have an HTML table with columns of different colours. This is done by assigning to each table cell 'td' element a CSS class defined with the appropriate colour.

Any table row background colour changes when it is subject to a mouse hover. This is done by the following CSS declaration in the style block of my HTML document:

table tr:hover td { background-color: pink; }

That's all very well. But I need to make this work using inline style strings. Such as: <table style="...">.

How can this be done?

I need to drop the table into a content management system that does not accommodate custom CSS style block interventions well.

Workaround suggested here won't work because it defines a before and after highlight colour. This would have to be defined for the whole row, so that the whole row would highlight upon hover. But when the hover is removed, the whole row would then have to return to its prior colours, and those are defined at the level not of row but cell.

2
  • 2
    Can't you inject a <style> tag to the head of the page via JavaScript? Nov 19, 2021 at 0:22
  • No its on Blogger. It's therefore neater and less of a headache to use inline style on own-grown html.
    – markling
    Nov 19, 2021 at 14:57

3 Answers 3

2

First thing, you mustn't use inline css, it's a bad practice and makes the code longer and harder to read. Just make an external file named style.css and link it in the head of your html OR use <style> </style> tags within the head of your html, but the external file one is more recommended because it separates the markup and the styling and you can use the same css file in another project too.

Anyways, here is the answer to your question

There is no solution to your question as inline css cannot use selectors or pseudo classes, for instance..

<div class="div1" style="div2 {background-color: red;}"></div>

<div class="div2" style=""></div> 

something like this is not possible , because the style="" attribute only applies to the element that is the holder of the attribute, it cannot make the use of css selectors such as div2{} or pseudo classes such as div1:hover

so the only solution to your problem is that you use <style></style> tags in the header or use an external style sheet.

If you want then you can use inline Javascript that will check for hover to execute a function that will change the background for you.

Also, kindly refer to this answer too. CSS Pseudo-classes with inline styles

6
  • Thanks for taking time to spell this out. Though in this case I must use inline CSS. This is in fact neater, quicker & much more pleasant than the alternative, which is to open the horrifying jumble of rusty old assorted screws and nails that is the Blogger theme editor, where I would have to insert some sort of conditional CSS statement. When my attempt to do this failed. It struck me that actually, in this instance, a table with inline styling is really rather elegant. BTW, that phrase you use - "you musn't" - makes me shiver. It makes me want to use inline CSS <b><i>everwhere</i></b> I can!
    – markling
    Nov 19, 2021 at 15:08
  • 2
    Well, aside from the question of whether or not using inline CSS is acceptable, it is just not possible to place pseudo selectors such as :hover inside the style argument. Further, it is not advisable to place a <style> tag in the body (although its scoped version it is part of the HTML5 standard), because browsers may interpret it in unpredictable ways. Nov 19, 2021 at 16:15
  • Use <style> tags in the html?
    – markling
    Nov 19, 2021 at 16:42
  • Granted, inline CSS is ugly and obscures sense. But I mean, it seems a decent tool for packing up a chunk of html to make it portable.
    – markling
    Nov 19, 2021 at 16:45
  • 1
    I used that "you mustn't" phrase because inline css is just inefficient, you have to type the code for each and every html tag and it also makes the code difficult to read, hence if you use style tags in the head or and external CSS file then you can use the same styling for more than one projects and you won't have to type the same styles for different elements, you can just separate them with commas. html , body, h1, form{ <!-- styles --> } Nov 20, 2021 at 11:09
1

Okay - the scenario: using inline styles in an html table, to make the table portable and entirely self-contained.

(So that the table can be used situations where you do not have access to the html page's header block -- as is the case, for example, with content management systems such as those used by Blogger, where you can insert html into the body of a blog post, but can't define a style block for a given page without opening a can of worms).

The challenge: define a mouseover event that changes the background colour of a table row.

This is a challenge because each table column has a different colour, and each cell defines its own colour. Yet inline styles take precedence over other styles, and an inline onmouseover instruction seems not to work.

Solution 1.

  • Define inline styles for each cell, to make table portable.

  • Override inline style with <style> block defined within body.

  • Where the only statement inside the style block is that implementing the mouseover.

Note: it is necessary to use the !important declaration in any mouseover style attribute, because otherwise it would not be able to claim precedence over the inline styles, and would have no effect.

<body>

    <!-- style block defined in HTML body
         to define CSS elements that could not be used inline.

         !important declaration necessary
         to override inline styles         -->

    <style type="text/css">
    table tr:hover td
    {
    background-color: #0ABC1F !important;
    }
    </style>
    
    <table>

    <thead><tr><th scope="col">one</th>
    <th scope="col">two</th>
    <th scope="col">three</th></tr>
    </thead>

    <!-- define inline styles for each table cell
         to make table portable                     -->        
    
    <tr>
    <td style="background-color: #ABCDEF;color:#000000;"
    >1000</td>
    
    <td style="background-color: #FEDCBA;color:#000000;"
    >W</td>
    
    <td style="background-color: #ABABAB;color:#000000;"
    >1</td>
    </tr>

</body>

Solution 2.

  • Define classes for each cell, using CSS classes defined in style block.

  • Put style block within html body.

  • Put in style block all classes, as well as mouseover instruction.

     <!-- define CSS style class for each table cell
          in style block inside HTML body
          to make table portable                     -->
    
     <style type="text/css">
     table tr:hover td
     {
     background-color: #0ABC1F !important;
     }
    
     .one { background-color: #ABCDEF;color:#000000; }
     .two { background-color: #FEDCBA;color:#000000; }
     .three { background-color: #ABABAB;color:#000000; }
    
     </style>
    
     <table>
    
     <thead><tr><th scope="col">one</th>
     <th scope="col">two</th>
     <th scope="col">three</th></tr>
     </thead>
    
     <tr>
     <td class="one">1000</td>
     <td class="two">W</td>
     <td class="three">1</td>
     </tr>
    

Option 1 seems wiser because of what is said about the potential for <style> blocks inside<body> blocks to go-unrecognised. It puts all essential styling inline, and keeps only the nice-to-have mouseover in the` block - as that is the only place, it seems, where it could possibly be.

0

You can't.

Use CSS Stylesheet or <style></style>

5
  • 1
    This is really a comment, and not an answer. Nov 19, 2021 at 4:32
  • @markling can I know the reason behind why you accepted this answer which is totally a comment and not an answer? Nov 21, 2021 at 5:49
  • Yes, because in conjunction with Jasper's comment, it led me to the answer. It contains the answer, though you are right - it's a rubbish answer. I sort of thought the tick as a holding position. I thought I might edit it, to make it sensible. But it was late, probably. I was tired and pushed for time. You know how it is. It's not satisfactory. I didn't feel llike I could tick my own answer, for some reason -- because this answer led me there... etc/
    – markling
    Nov 21, 2021 at 22:37
  • Please do flag it if you think it a rubbish decision. You would have a good case for it.
    – markling
    Nov 21, 2021 at 22:39
  • It's okay, its not like if I am begging you to accept my answer. Also I flagged this answer a long time ago when this was just posted. Anyways, hope you found what you needed Nov 22, 2021 at 4:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.