Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

hide table borders

I'm using a table in the corner label area of a grid and I have the border set to 0 but the inner and outer borders of the table still show.  I'm sure something else is overriding my setting.  How can we change to hide the borders?
asked Mar 29 by Jay Rutherford Platinum (50,145 points)
The quick (and maybe somewhat inadvisable) trick to resolve some issues like this to is to add "!important" to the rule:

#myElement {
    attribute: rule !important;

What is probably a more proper solution is to find out what is overriding the setting and either remove it or use a CSS selector with a higher precedence.  You may be able to find this conflicting rule yourself in your browser console, or I could help find it if I could reproduce the behavior on my machine:

- What versions of the software are you running?
- What style settings do you have turned on in your survey settings?
- Any custom CSS on the page?
I'm running 9.13.1.  This survey is using the Default style.  No custom CSS on the page.
In the Corner Label I just have this:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <td align="center" width="40%"> Software Feature </td>
  <td align="center"> Description </td>
I tried to reproduce those conditions, but the table displays without borders for me.  Could you share your .ssi or upload it somewhere so I can see the behavior happening?
I just sent an email with a link for the ssi file.
There are two CSS rules creating this behavior.  The first is from your global HTML head tag:

.inner_table td {border-width: 1px; border-style: solid;}

Your table appears within the grid question's default table, making this rule apply.  If you want a rule like this to apply to just the table cells directly descending from that table, I usually write the selector like this:

.inner_table > tbody > tr > td

You're not alone in this - it appears that Lighthouse Studio's built-in CSS has the same problem!  The second CSS rule comes from your grid's settings, where you've defined a border width at 1px.  Removing this along with updating your HTML head code will stop the border from displaying.
Got it.  Yeah, I forgot about the head tag.  Those were some modifications you helped with when I was trying to apply some customization for a template for a specific client.  Thanks for figuring that out.

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.