skip to Main Content

I am trying to style the html code but the css of style tag inside the const htmlContent is not applying to the html code below.Is there any other alternate way to do this which is easier .No styles are working

const htmlContent = `
    <style>
        table tr:hover {
        background-color: #f5f5f5;
    }
    </style>
    
    <header style="padding: 20px; text-align: center;position: relative">
        <div class="contact-info" style="position: absolute; margin-top: 21px; margin-right: 25px; top: 0; right: 0; font-family: Arial, sans-serif; font-size: 13px; color: #fff; text-align: right;">
            Contact: +91-8491064038, +91-9622259639<br>
            Email: [email protected]
        </div>
        <div style ="padding: 20px;text-align: center;background-color: #333;">
            <h1 style="display: inline-block;font-family: Arial, sans-serif; font-size: 48px; font-weight: bold; margin: 0; color: #333; text-shadow: 2px 2px #ccc; background-image: linear-gradient(to bottom, #ffcc00, #ff6600); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Azees Travel</h1>
            <p id="tag" style="font-family: Arial, sans-serif; font-size: 16px; color: white; font-weight: bold;">Dream it, visit it</p></div>
        <div>
        <p id = "greet" style="font-family: Georgia, serif; font-size: 16px; line-height: 2.5; max-width: 1232px; padding: 30px; background-color: #fff; color: #333; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); margin: 0; margin-top: 10px;"><span id="gretD" style="font-size:29px">
            Greetings from Azees Travel!</span><br>
            Great to hear you are interested in visiting Kashmir.You can take a look at our scheduled upcoming tour for you. All of our Kashmir Tours include visits to Pahalgam, Gulmarg, 
            Sonamarg and Srinagar.It also includes accommodation and transfers, when you arrive from airport and depart to Airport.We use quality accommodation throughout the tour and make 
            use of new air-conditioned 4-wheelers. You are in good hands with our certified speaking guides all of whom work for us full time.We guarantee every tour and are committed to 
            making sure you have a great experience. We wish you a very happy journey and we would love to make your trip more comfortable and enjoyable.Team AZEES TRAVEL wishes you a great 
            journey & we would love to hear from you upon final package confirmation.
            Thank you .....!</p>
        </div>
        <h3 style="text-align:left;color: red; text-decoration: underline;">Summary:</h3>
        <table style="border-collapse: collapse; width: 100%; margin-bottom: 20px; background-color: #f8f8f8; font-size: 16px; color: #333;">
            <tr>
                <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;"><Tour Duration:</td>
                <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">5 Days</td>
                <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Adults:</td>
                <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
            </tr>
            <tr>
                <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Tour Start Date:</td>
                <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">April 1, 2023</td>
                <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Kids:</td>
                <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
            </tr>
        </table>
        <h3 style="text-align:left;color: red; text-decoration: underline;">The Travel Itinerary:</h3>
    </header>


    </form>`;

2

Answers


  1. Two things:

    1. You don’t see the color change because td is in front tr and obscures the background
    2. Inline style have higher specificity and will always override styles (so it’s not recommended to use them)

    Fix:

    table tr:hover td {
      background-color: #f5f5f5 !important;
    }
    

    Adding td fixes the obscuring problem

    Adding !important fixes the inline style issue

    const htmlContent = `
        <style>
            table tr:hover td {
            background-color: #f5f5f5 !important;
        }
        </style>
        
        <header style="padding: 20px; text-align: center;position: relative">
            <div class="contact-info" style="position: absolute; margin-top: 21px; margin-right: 25px; top: 0; right: 0; font-family: Arial, sans-serif; font-size: 13px; color: #fff; text-align: right;">
                Contact: +91-8491064038, +91-9622259639<br>
                Email: [email protected]
            </div>
            <div style ="padding: 20px;text-align: center;background-color: #333;">
                <h1 style="display: inline-block;font-family: Arial, sans-serif; font-size: 48px; font-weight: bold; margin: 0; color: #333; text-shadow: 2px 2px #ccc; background-image: linear-gradient(to bottom, #ffcc00, #ff6600); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Azees Travel</h1>
                <p id="tag" style="font-family: Arial, sans-serif; font-size: 16px; color: white; font-weight: bold;">Dream it, visit it</p></div>
            <div>
            <p id = "greet" style="font-family: Georgia, serif; font-size: 16px; line-height: 2.5; max-width: 1232px; padding: 30px; background-color: #fff; color: #333; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); margin: 0; margin-top: 10px;"><span id="gretD" style="font-size:29px">
                Greetings from Azees Travel!</span><br>
                Great to hear you are interested in visiting Kashmir.You can take a look at our scheduled upcoming tour for you. All of our Kashmir Tours include visits to Pahalgam, Gulmarg, 
                Sonamarg and Srinagar.It also includes accommodation and transfers, when you arrive from airport and depart to Airport.We use quality accommodation throughout the tour and make 
                use of new air-conditioned 4-wheelers. You are in good hands with our certified speaking guides all of whom work for us full time.We guarantee every tour and are committed to 
                making sure you have a great experience. We wish you a very happy journey and we would love to make your trip more comfortable and enjoyable.Team AZEES TRAVEL wishes you a great 
                journey & we would love to hear from you upon final package confirmation.
                Thank you .....!</p>
            </div>
            <h3 style="text-align:left;color: red; text-decoration: underline;">Summary:</h3>
            <table style="border-collapse: collapse; width: 100%; margin-bottom: 20px; background-color: #f8f8f8; font-size: 16px; color: #333;">
                <tr>
                    <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;"><Tour Duration:</td>
                    <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">5 Days</td>
                    <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Adults:</td>
                    <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
                </tr>
                <tr>
                    <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Tour Start Date:</td>
                    <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">April 1, 2023</td>
                    <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">Kids:</td>
                    <td style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; background-color: #e6e6e6; font-weight: bold;">8</td>
                </tr>
            </table>
            <h3 style="text-align:left;color: red; text-decoration: underline;">The Travel Itinerary:</h3>
        </header>
    
    
        </form>`;
    
    document.body.innerHTML = htmlContent
    Login or Signup to reply.
  2. as the comments implied, the td was missing. But also add the !important to the css, otherwise it won’t overwrite your background-color used in the table

    <style>
            table tr:hover td {
            background-color: #f5f5f5 !important;
        }
        </style>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search