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
Two things:
td
is in fronttr
and obscures the backgroundFix:
Adding
td
fixes the obscuring problemAdding
!important
fixes the inline style issueas 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