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.

markling
  • 1,232
  • 1
  • 15
  • 28

3 Answers3

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

RudyTheWebDev
  • 184
  • 9
  • 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 everwhere I can! – markling Nov 19 '21 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 ` – Jasper Habicht Nov 19 '21 at 16:15
  • Use – markling Nov 19 '21 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 '21 at 16:45
  • Great thing about Blogger though is that you can put html in the body of a post. Unlike Medium, say. – markling Nov 20 '21 at 10:46
  • 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{ }` – RudyTheWebDev Nov 20 '21 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.

markling
  • 1,232
  • 1
  • 15
  • 28
0

You can't.

Use CSS Stylesheet or <style></style>

Menofre
  • 94
  • 4
  • 1
    This is really a comment, and not an answer. – RudyTheWebDev Nov 19 '21 at 04:32
  • @markling can I know the reason behind why you accepted this answer which is totally a comment and not an answer? – RudyTheWebDev Nov 21 '21 at 05: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 '21 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 '21 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 – RudyTheWebDev Nov 22 '21 at 04:31