Forum Discussion

Samantha_O's avatar
Samantha_O
Champion
11 years ago

Styling tables in Community

I have been testing out some styles on tables within our Stage and Production environments that end up appearing different.  I saw this older post here about something similar (although I am using inline styles instead of CSS) but this topic was older and wanted to see if there could be a solution now that might not have been available 3 years ago. 

 

See the information & code below.  Any help, tips or suggestions that you have are welcome!    (I had posted this in the Support Board, but was directed to try posting here in Developer Discussion to see if there were any other suggestions)

 

This is my original post:

 

I have been playing around in our Stage environment and our Moderator's only area in production to test out adding tables as part of a signature.  I have seen that some styles are showing in Stage but not in production, and in production some styles show in the Rich Text Editor but not when posted. In particular it is the border-radius that seems to not be accepted/working properly in all scenarios.  Can this code not be used in a Lithium Community?  Any workaround to this?  I want the table to look like a button, so the rounded corners helps.  Any ideas that you have are appreciated. 

 

This is the code that I am using: 

 

<table style="border-radius: 15px; width: 300px; background-color: #0078c1;" width="300px">
<tbody>
<tr>
<td style="background-color: #0078c1;"> *I had to add the background color to the column here for it to show in production*
<p align="center"><a style="color: #ffffff; font-color: #FFFFFF;" href="http://google.com" target="_blank">Some simple text here</a><img src="http://imageurl.jpg" border="0" width="125" /></p>
</td>
</tr>
</tbody>
</table>

 

Here are the differences in views - (All screenshots are taken from Chrome version 38)

table-radius.png

 

I also noticed that I use similar code in one of our "Custom Alert" banners at the top of our Community on our Stage environment.  The code is very similar, adding in a background image to have a gradient appear, but the border-raduis shows without issue.  Due to some of the CSS of our Community, there is some additional code in that area (padding around Div tags) so that the text appears as we want it to. 

This is what it looks like:

2014-11-07_0923.png

 

This is the code: 

<table cellpadding="10" style="border-radius: 15px; background-image:url(https://backgroundimageurl.image.png); background-repeat: repeat-x;  background-color: #ffbc23; font-size: 11pt; font-color: #406e98;" width="100%">
<tbody>
<tr>
<td>
<Div style="font-size: 11pt; color: #406e98; padding: 8px 5px 5px 10px;"> <b>This is a sample Alert header</b></div>
<div style="font-size: 11pt; color: #406e98; padding: 10px 5px 8px 10px;">This is sample alert text </div>
</td>
</tr>
</tbody>
</table>

 

I know a workaround would be to make the whole table an image & make it a clickable link.  The reason a table works better is edits can be made easier within a table for small changes, like wording or the image needs to be changed or added to in the table.

  • OlivierS's avatar
    OlivierS
    Lithium Alumni (Retired)
    11 years ago

    Samantha_O

     

    I think you should use the Google Chrome developer to see how the styles in your table are impacted by your stage / community / Rich Text editor CSS.

     

    The best way to probably fix this and make sure you have the same results on stage / production / RTE would be to create a stylesheet and make sure your table uses the wanted style and not another one ...

     

    Hope it makes sense :-)

  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    11 years ago

    Hey Samantha,

     

    Can I ask why you're using a table vs. divs to style what looks like to be a simple link/button with an image? I ask because tables are difficult to use for styling for a myriad of reasons (more tags to manage, to many general tags unless you go in and apply classes to them but then creating more code, slower to load, trickier to style, not very accessible, etc.). Tables should really only be used to hold and organize tabular data and the image you showed in your original post looks like something that could be easily and quickly achieved with divs and css (preferable in a style sheet, but you could try inline..).

     

    I have some historically knowledge that in the past, the wysiwyg editor has its own style sheet, and configurations that can affect how tables are displayed in published posts. (e.g. allowing html, inline code, etc.) One example i remember was a community that would copy and paste the same code written for email newsletters (done using tables) into topic posts, but the formatting changed as a result. some of this was fixed by altering the css specific to tables in message posts and I think specifically it was the property for border-collapse, but I digress.

     

    Your table might be affecting by something similar, but really, I suggest trying to re-create this with divs and css. It simple enough that if it would be a great problem to solve especially if you're just learning html/css.

     

    In fact, here's a js fiddle showing just one quick way to accomplish what you want. You may ned to tweak the css a bit, (add the css to your community's css file) and replace the image url with the image you have in your screenshot. http://jsfiddle.net/shampookie/8p0qdh4s/1/

     

    Hopefully that helps, and you're able to break down the code to understand what it's doing.

    • Samantha_O's avatar
      Samantha_O
      Champion
      10 years ago
      Thanks, this is helpful. I will try this out to see if it will work best for our Community.