Question

我创建了一个KML地图并上传到Fusion Tables，我试图通过他们的HTML代码框自定义信息框。信息框包含一个包含文本和图形的简单表格。这是代码：

<div class="googft-info-window"
style="background-color:red"
{description}
</div>

信息窗口背景会将颜色更改为红色，但表格没有（这是上面代码中的{description}。

有没有办法给桌子打造风格？我基本上想要更改表格文本的颜色，而不是信息窗口中的标题！

Answer 1

如果这是你的整个代码，那么它不是正确的HTML - 你错过了你的结束div括号“＆gt;”，我假设在{description}之前和之后的“red”。我在假设你写这个问题时只是一个错字。

您始终可以将{description}包装在自己的div中，并将样式应用于此。所以示例代码是：

<div class='googft-info-window' style='width: 500px;'>
  <div style='background-color: red; overflow: auto;'>
     {description}
  </div>
</div>

我收录了“overflow：auto;”所以div将扩展以适合您的内容。如果您希望它只展开一个方向，请执行“overflow-y：auto”或overflow-x：auto;“。您可以根据需要进行尽可能多的格式化。

这应该有希望帮助一些。如果我完全错过了你的问题，我道歉。

如果您或其他人感兴趣，我已经走了几步。

动态模板

您甚至可以再进行一两步，并根据行中的项添加条件格式，但这需要更多的编码。您可以根据您的信息更改特定元素的样式。

假设您有一个包含3列的表格，它可能如下所示：

<div class='googft-info-window' style='width: 520px;'>
  <table style='background-color: red; overflow: auto; margin: 10px;'>
    <thead>
      <tr>
        <th style='width: 100px;'>Term</th>
        <th style='width: 300px;'>Name</th>
        <th style='width: 100px;'>Party</th>
    </thead>
    <tbody>
      <tr>
        <td>{term}</td>
        <td>{first_name} {last_name}</td>
        <td>{party}</td>
      </tr>
    </tbody>
  </div>
</div>

使用条件格式/动态模板，您可以使您的表（或您喜欢的任何元素）成为不同的样式。在此示例中，整个表格的背景颜色将取决于该行中的人所属的政党：

{template .contents}
    <div class='googft-info-window' style='width: 520px;'>
    {if $data.formatted.party=='Republican'}
      <table style='background-color: lightcoral; overflow: auto; margin: 10px;'>
    {else}
    {if $data.formatted.party=='Democrat'}
      <table style='background-color: lightskyblue; overflow: auto; margin: 10px;'>
    {else}
      <table style='background-color: white; overflow: auto; margin: 10px;'>
    {/if}{/if}
        <thead>
          <tr>
            <th style='width: 100px;'>Term</th>
            <th style='width: 300px;'>Name</th>
            <th style='width: 100px;'>Party</th>
        </thead>
        <tbody>
          <tr>
            <td>{$data.formatted.term}</td>
            <td>{$data.formatted.first_name} {$data.formatted.last_name}</td>
            <td>{$data.formatted.party}</td>
          </tr>
        </tbody>
      </div>
</div>
{/template}

请注意，在上面的示例中，它包含在“{template .contents}”和“{/ template}”中。要进行动态格式化，需要{template} ... {/ template}，但.contents不是。每个字段都需要{$ data.formatted。[field_name]}，其中[field_name]将替换为您的字段。使用{template}包装内容后，如果单击左侧的字段，则无论光标放在文本框中的哪个位置，都会以正确的格式添加它们。

有关Dynamic Templating和Closures的更多信息。

如何使用HTML或CSS为Google Fusion Tables中的信息窗口设置样式？

1 个答案:

动态模板