How to use HTML or CSS to style an info window in Google Fusion Tables?

问题

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>

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!

回答1:

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.

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>

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.

Dynamic Templates

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.

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}

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.

More information on Dynamic Templating and Closures.

来源：https://stackoverflow.com/questions/37422971/how-to-use-html-or-css-to-style-an-info-window-in-google-fusion-tables

标签

html

css

google-fusion-tables

styling

infowindow