CSS - UI Pages <table> background-color

Stewe Lundin
Mega Guru

‎01-18-2018 11:43 PM

Hi hivemind!

Setting up a UI page with a bunch of <table>'s and <div>'s

My problem is that when I set a background pic to the <div> via css styles the <table> tagg placed in the <div> has a white background-color, without me specifying it.

The <table> tag inherits the scc property background-color:white;

How do I get it back to being transparent.

If I run the CSS and HTML outside of service now It show as expected.  

0 Helpfuls
  • 2,203 Views
3 REPLIES 3

EashVerma
Giga Expert

‎01-18-2018 11:48 PM

Hello Stewe,



Please try giving the background image to the Body tag. That might make other divs, to be created over it with transparent background. An example would be:



<html>


<body background="w3s.png">




<h1>Hello world!</h1>


<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>


<p>The background attribute is not supported HTML5. Use CSS instead.</p>


<div>


<table>


  <tr>


      <th>Month</th>


      <th>Savings</th>


  </tr>


  <tr>


      <td>January</td>


      <td>$100</td>


  </tr>


</table>


</div>


</body>


</html>


0 Helpfuls

Stewe Lundin
Mega Guru
In response to EashVerma

‎01-19-2018 12:04 AM

The <div> is not the problem the background pic/ color or what ever works just fine there.



The issue is the <table> tag that inherits the background-color (white in thes case)


Now I just set the background-color:transparent; in my CSS style sheet.
And that works, but I'm pretty sure that this will come back and haunt me later on, now I'm effecting the <table> tag for the the rest of the page.
A solution but an ugly one.



So how   do you prevent inheritance on certain html tags in the UI pages, I'm pretty sure this will not just be isolated to the <table> tag.  


0 Helpfuls

Pratyusha
ServiceNow Employee
ServiceNow Employee

‎01-19-2018 12:13 AM

Hi Stewe,



We can define an inline style on the table element or define a stylesheet with the necessary style definitions on table element and use it in the UI page.


So, in your case if the HTML is something like below -


<html>


        <body>


                  <div style="background-color:red">


                            <table>


                                      <tbody>


                                                <tr>


                                                          <td>A</td>


                                                          <td>B</td>


                                                </tr>


                                      </tbody>


                            </table>


                  </div>


        </body>


</html>



1. We can simply define the inline style on table element like  


<table style="background: transparent;"


        ...


</table>


OR


2. If we want to define generic CSS to be shared across multiple UI pages, we can define stylesheet using Content Management > Design > StyleSheets and use it in the UI page as below -


<html>


        <head>


                  <link href="sys_id_of_stylesheet.cssdbx" rel="stylesheet" type="text/css"></link> <!-- Replace with the sys id of the stylesheet record created -->


        </head>


        <body>


                  <div style="background-color:red">


                            <table>


                                      ...


                            </table>


                  </div>


        </body>


</html>



Thanks,


Pratyusha


0 Helpfuls