-2
ArcGIS Online（ブラウザマップ）では、HTMLとCSSコードを複数の異なるプロットポイントに貼り付けています。目的は、ポイントをクリックすると、ダイアログボックス/スモールウィンドウにスタイル付きのテーブルをポップアップ表示させることです。最初は、テーブルは正しく見えて機能します。レイヤーを保存した後にそれを取り出してから再ロードすると、生のCSSコードとスタイリングがゼロのテーブルだけが表示されます。ArcGIS OnlineでカスタムCSSスタイルのテーブルが動作しない
ArcGISでサポートされているHTMLヘルプページを確認したところ、オンラインブラウザのバージョンが「スタイル」タグ（外部、内部、およびインライン）をサポートしていないことがわかりました。これは、私のテーブルにリロードした後に生のコードを表示させた原因です。
これらのオプションは「div」と「span」ですが、これらのオプションを正しく動作させることはできません。この仕事を私が意図しているようにする方法はありますか？以下
ArcGIS Online Supported HTML Page
実際の完全なコード：
<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><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</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>