Help with custom html in views

Just trying to do some custom html views for custom properties and using tables. When I tried to do any formatting it affects the whole page. How do you do custom html without affecting the whole page. Bottom has what it does to the page. Thanks

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<h2>Site Name: ${Site_Name} Profit Center:

${Profit_Center} Support Tier: ${Support_Tier}</h2>

<table>

<tr>

<th>Contact Name</th>

<th>Phone Number</th>

</tr>

<tr>

<td>${Main_Site_Phone}</td>

</tr>

<tr>

<td>${Site_Contact}</td>

<td>${Site_Contact_Phone}</td>

</tr>

<tr>

<td>${Site_Contact_2}</td>

<td>${Site_Contact_Phone_2}</td>

</tr>

</table>

</body>

</html>

Find more posts tagged with

custom_html_iframe

custom html

Accepted answers

All comments

mesverrum

You might look into using the scoped option with your style tags, I've never personally had need to use it but my HTML resources are also pretty rudimentary and don't use the style tag anyway.

stevengj1

Thanks but the scope option did not help but lead me to fine assign a class to the table and do the style to the class

<style>

table.contact {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

border-collapse: collapse;

width: 50%;

}

table.contact td, table.contact th {

border: 1px solid #ddd;

padding: 8px;

}

table.contact tr:nth-child(even){background-color: #f2f2f2;}

table.contact tr:hover {background-color: #ddd;}

table.contact th {

padding-top: 12px;

padding-bottom: 12px;

text-align: left;

background-color: #1a53ff;

color: white;

}

</style>

<tr>

<th>Contact Name</th>

<th>Phone Number</th>