如何使用HTML或CSS在Google Fusion Tables中设置信息窗口的样式? [英] How to use HTML or CSS to style an info window in Google Fusion Tables?

问题描述

我创建了一个KML地图，并上传到Fusion Tables，在这里我试图通过其HTML代码框来自定义信息框.信息框包含一个带有文本和数字的简单表格.这是代码:

I have created a KML map and uploaded to Fusion Tables where I am trying to customise the info box through their HTML code box. The info box contains a simple table with text and figures. Here is the code:

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

信息窗口的背景颜色将变为红色，但表格不会更改(这是上面代码中的{description}.

The info-window background will change colour to red, but the table does not (which is the {description} in the code above.

有没有一种样式化表格的方法?我本质上是想更改表格文本的颜色，而不是信息窗口中的标题！

Is there a way to style the table? I essentially want to change the color of the tables text but not the headings in the info window!

推荐答案

如果这是您的全部代码，则说明HTML不正确-您缺少了div结束括号>"，我假设在{description}之前和红色的".我以为那是您写问题时的错字.

If that's your entire code, then it's not proper HTML – you're missing your closing div bracket ">", I assume before {description} and after "red". I'm assuming that's just a typo when you wrote the question.

您始终可以将{description}包裹在自己的div中，并对其应用样式.因此，示例代码为:

You can always wrap your {description} in it's own div and apply styles to that. So an example code is:

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

我添加了溢出:自动；"因此div会扩展以适合您的内容.如果您希望它只向一个方向扩展，请执行"overflow-y:自动"或"overflow-x:自动；".您可以根据需要进行任意格式设置.

I included "overflow: auto;" so the div will expand to fit your content. If you'd like it to expand just one direction, do "overflow-y: auto" or overflow-x: auto;". You can do as much formatting as needed.

希望可以帮助一些人.如果我完全错过了您的问题，我深表歉意.

That should hopefully help out some. I apologize if I completely missed the point of your question.

如果您或其他人有兴趣，我在下面进行了进一步的操作.

I've gone a few steps further below if you or others are interested.

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

You can even go a step or two further and add conditional formatting based on items in the row, but that requires a bit more coding. You can change the style of specific elements based on your information.

假设您有一个包含3列的表格，看起来可能像这样:

Let's say you have a table with 3 columns, it could look like this:

<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>

使用条件格式/动态模板，可以使表(或所需的任何元素)具有不同的样式.在此示例中，整个表格的背景颜色将取决于该行中的人所属的哪个政党:

With conditional formatting/dynamic templating, you can make your table (or whatever element you'd like) a different style. In this example, the background color of the entire table will be dependent on which political party the person in that row belongs to:

{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}包裹内容后，如果单击左侧的字段，则将它们以正确的格式添加到文本框内光标所在的位置.

Notice in the above example, it is wrapped in "{template .contents}" and "{/template}". To do dynamic formatting, {template} ... {/template} are required, but .contents is not. Each field within needs to have {$data.formatted.[field_name]} where [field_name] would be replaced with your fields. Once you wrap your content with {template}, if you click the fields on the left, they will be added in the correct formatting wherever your cursor is placed within the text box.

有关动态模板和关闭.

这篇关于如何使用HTML或CSS在Google Fusion Tables中设置信息窗口的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！