How do you make table borders invisible in a Story Map?

671
1
Jump to solution
02-06-2019 03:29 PM
ScottMcGee4
New Contributor III

I'm using the Story Map Series template for one of our AGOL web apps. I have information that I want to show in the sidebar, and this information is best presented in a table.

I can create the table just fine - no problem with that. But when I view the app, it shows the table borders, as shown in this screenshot:

I don't want the table borders to show. I thought about using the <style> tag to make the borders black, but I haven't been able to get that to work.

Here's the code that I'm using to create the table:

<table border="1" bordercolor="black" cellpadding="0" cellspacing="0" width="200">
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Item 4</td>
            <td>Item 7</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>Item 5</td>
            <td>Item 8</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>Item 6</td>
            <td>Item 9</td>
        </tr>
    </tbody>
</table>

Any ideas on how I can make the table borders invisible?

Thanks.

0 Kudos
1 Solution

Accepted Solutions
ScottMcGee4
New Contributor III

I figured out how to get the results that I wanted, but the solution was to ditch the table. Instead, I faked the look of a table by simply inserting a series of periods between each piece of information that I wanted to display in a table-like fashion, and since the text is displayed on a black background, I made the periods black also, so they don't show. For example:

Item1.....Item4.....Item7

Item2.....Item5.....Item8

Item3.....Item6.....Item9

Here's what the final result looks like:

And here's what it looks like when I highlight the text in the sidebar:

I did all sorts of Googling and trial-and-error with HTML in trying to make the table borders not show up, but I've come to the conclusion that it's probably not possible to do that in the current version of AGOL. My solution isn't elegant, but it gets the result that I wanted.

View solution in original post

0 Kudos
1 Reply
ScottMcGee4
New Contributor III

I figured out how to get the results that I wanted, but the solution was to ditch the table. Instead, I faked the look of a table by simply inserting a series of periods between each piece of information that I wanted to display in a table-like fashion, and since the text is displayed on a black background, I made the periods black also, so they don't show. For example:

Item1.....Item4.....Item7

Item2.....Item5.....Item8

Item3.....Item6.....Item9

Here's what the final result looks like:

And here's what it looks like when I highlight the text in the sidebar:

I did all sorts of Googling and trial-and-error with HTML in trying to make the table borders not show up, but I've come to the conclusion that it's probably not possible to do that in the current version of AGOL. My solution isn't elegant, but it gets the result that I wanted.

0 Kudos