Border Visibility not working on Tables

Hello - I am styling a table and want the left and right borders to be hidden.

When I select the table cells, the border visibility option is greyed out. I then try using the Widget Style Manager by duplicating the Table Cell style, renaming to Table Cell 2, check the box next to border visibility, and select which borders are visibile/not visible, click OK.

All of the borders are still displayed in Axure and in the Preview.

Suggestions please :slight_smile:

Hi Katy,

Admittedly, the Table widget is more limited in terms of styling and interactivity, compared to other widgets like the default shapes. And so, by and large, the primary recommendation when building more involved tables is to use the default shape widgets to customize a table. I can understand that that may be a bigger time investment than using the default Table, but you could also consider saving your customized table in a Custom Widget Library, which you can re-use. Here’s more information on widget libraries:

Widget Libraries

There have been related forum discussions which involved inserting JavaScript into the OnPageLoad to target a specific table widget. That gets into pretty advanced territory, though, outside the typical scope of support–here’s an example:

Table cell border.

If JavaScript is something you’re ready to harness on your end, do feel free to give that a shot. I’m thinking that changing the “border-left” and “border-right” parameters may be a way forward. HTH!

The lack of control over table borders has been an ongoing pain for me for years. Especially due to the rise of material design, it’s common to have tables styled with a horizontal line between each row, but no vertical lines. To accomplish this in Axure I have to manually add a horizontal line for each row on top of the table. Ugh!

I’d love it if you could add the ability to style this directly on the table.

Hi judyjeu,

I can definitely understand your frustration here, and I would be more than happy to forward your feedback to our product management team for review.

In the meantime, if the JavaScript workaround mentioned by Alex above doesn’t do the trick, you may be able to use an end-of-the-head Axure Share plugin to style your table borders with CSS. For this, you’ll want to turn off your tables’ borders in Axure RP and then add top and bottom borders to the “table_cell” class using the CSS “border” property. (If you haven’t worked with CSS before, you may want to reach out to a web developer on your team for help achieving the look you’re going for.)

I hope this helps!

Workaround for me was to set the border color to match the background so that they become “invisible”

Is this an Axure usability issue that might/could/should/would be moved from the backlog?

Feature inconsistency: Border selections in some, but not all widgets.

Suggesting that non-technical-savvy designers resort to JS solutions is not a user-centered development solution.

2 Likes

Hi goborobo1,

Thanks for your feedback. We’re still evaluating what we’ll be able to do in regards to table cell customization and interactivity, but I’ll go ahead and submit some additional feature requests for this. Version 9 of Axure RP is also progressing in development, so some aspects of the table widget may be re-evaluated for that new release as well. You can stay up-to-date with any news about Axure RP 9 here:

https://www.axure.com/blog/new-in-9/

any plans to implement this yet?