Custom CSS styled table not working in ArcGIS Online - html

Question

In ArcGIS Online (browser map), I have been pasting HTML and CSS code into several different plotted points. The goal is to have a styled table pop up in the dialog box/small window when the point is clicked on. At first, the table looks and functions properly, however; after saving the layer, removing it, then reloading it, all you see is the raw CSS code and a table with zero styling.
After reviewing the ArcGIS supported HTML help page, I noticed that the online browser version does not support the "style" tag (external, internal, and inline), and it gets filtered out of the code. This is what caused my table to show raw code after reloading it.
The options they list are "div" and "span," but I cannot seem to get these to work properly. Is there a way to make this work the way that I intend it to?
ArcGIS Online Supported HTML Page
Actual full code below:
<style type="text/css"> (this style tag doesn't work and is automatically filtered out)
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 1280px;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 12px 10px;
}
.datagrid table thead th {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#4D1A75');
background-color: #006699;
color: #ffffff;
font-size: 17px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table thead th:nth-child(1) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9643D6), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #9643D6 5%, #4D1A75 100%);
background-color: #9643D6;
}
.datagrid table thead th:nth-child(2) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #D05649), color-stop(1, #7A281F));
background: -moz-linear-gradient( center top, #D05649 5%, #7A281F 100%);
background-color: #D05649;
}
.datagrid table thead th:nth-child(3) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #159D82), color-stop(1, #094338));
background: -moz-linear-gradient( center top, #159D82 5%, #094338 100%);
background-color: #159D82;
}
.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #4D1A75;
font-size: 12px;
border-bottom: 1px solid #4D1A75;
font-weight: normal;
}
.datagrid table tbody .alt td {
color: #00496B;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody td:nth-child(1) {
background: #F4E3FF;
}
.datagrid table tbody .alt td:nth-child(1) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(2) {
background: #F9D9D6;
}
.datagrid table tbody .alt td:nth-child(2) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(3) {
background: #A5F3E3;
}
.datagrid table tbody .alt td:nth-child(3) {
background: #FFFFFF;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #652299;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #FFFFFF));
background: -moz-linear-gradient( center top, #737373 5%, #FFFFFF 10%);
background-color: #737373;
}
.datagrid table tfoot td {
padding: 0;
font-size: 12px
}
.datagrid table tfoot td div {
padding: 2px;
}
.datagrid table tfoot td ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.datagrid table tfoot li {
display: inline;
}
.datagrid table tfoot li a {
text-decoration: none;
display: inline-block;
padding: 4px 8px;
margin: 1px;
color: #FFFFFF;
border: 1px solid #652299;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #652299), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#652299', endColorstr='#4D1A75');
background-color: #652299;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
text-decoration: none;
border-color: #652299;
color: #FFFFFF;
background: none;
background-color: #0682B8;
</style> (this style tag doesn't work and is automatically filtered out)
<div class="datagrid">
<table style="text-align:center">
<thead>
<tr>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
<li><span>Temporary Blank</span>
</li>
<li><span>Temporary Blank</span>
</li>
<li><span>Temporary Blank</span>
</li>
</ul>
</div>
</tr>
</tfoot>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>

Answer 1

it help full
<style type="text/css">
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 1280px;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 12px 10px;
}
.datagrid table thead th {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#4D1A75');
background-color: #006699;
color: #ffffff;
font-size: 17px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table thead th:nth-child(1) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9643D6), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #9643D6 5%, #4D1A75 100%);
background-color: #9643D6;
}
.datagrid table thead th:nth-child(2) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #D05649), color-stop(1, #7A281F));
background: -moz-linear-gradient( center top, #D05649 5%, #7A281F 100%);
background-color: #D05649;
}
.datagrid table thead th:nth-child(3) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #159D82), color-stop(1, #094338));
background: -moz-linear-gradient( center top, #159D82 5%, #094338 100%);
background-color: #159D82;
}
.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #4D1A75;
font-size: 12px;
border-bottom: 1px solid #4D1A75;
font-weight: normal;
}
.datagrid table tbody .alt td {
color: #00496B;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody td:nth-child(1) {
background: #F4E3FF;
}
.datagrid table tbody .alt td:nth-child(1) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(2) {
background: #F9D9D6;
}
.datagrid table tbody .alt td:nth-child(2) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(3) {
background: #A5F3E3;
}
.datagrid table tbody .alt td:nth-child(3) {
background: #FFFFFF;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #652299;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #FFFFFF));
background: -moz-linear-gradient( center top, #737373 5%, #FFFFFF 10%);
background-color: #737373;
}
.datagrid table tfoot td {
padding: 0;
font-size: 12px
}
.datagrid table tfoot td div {
padding: 2px;
}
.datagrid table tfoot td ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.datagrid table tfoot li {
display: inline;
}
.datagrid table tfoot li a {
text-decoration: none;
display: inline-block;
padding: 4px 8px;
margin: 1px;
color: #FFFFFF;
border: 1px solid #652299;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #652299), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#652299', endColorstr='#4D1A75');
background-color: #652299;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
text-decoration: none;
border-color: #652299;
color: #FFFFFF;
background: none;
background-color: #0682B8;
</style> (this style tag doesn't work and is automatically filtered out)
<div class="datagrid">
<table style="text-align:center">
<thead>
<tr>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
<li><span>Temporary Blank</span>
</li>
<li><span>Temporary Blank</span>
</li>
<li><span>Temporary Blank</span>
</li>
</ul>
</div>
</tr>
</tfoot>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>