Adding CSS to table cell shortcode

[mgma]

Hi guys-

I cannot figure out how to add CSS to a table cell. So I can style individual cells? I’ve been trying variations, like…

[trow]
[thcol width=”20%” class=”t-head-type”]Type of user[/thcol]
[thcol width=”16%” extraclass=”t-head-green”]Mapinfo Pro[/thcol]
[thcol width=”16%”class=”t-head-purple”]Spectrum Spatial[/thcol]
[thcol width=”15%”class=”t-head-blue”]Anysite[/thcol]
[thcol width=”16%”class=”t-head-gold”]Web Desktop Access[/thcol]
[thcol width=”15%”class=”t-head-red”]Magnify[/thcol]
[/trow]

As you can see.. I’m also trying to control the width of each column also.

Can you help with these?

Thanks!

[David Martin – Support]

Hi,

Those are shortcodes, there is not a parameter to add a class. What is your page URL so we can help you out?

You can style the table using standard CSS for table tr’s td’s, ex: http://www.w3schools.com/css/css_table.asp

[mgma]

Thanks David. But I need to style individual cells, not just all TD’s, etc.

I’ve built Bootstrap tables instead, but it seems they’re not working correctly. For instance this one is not Bootstrap responsive… i.e. it does not scroll horizontally on Mobile…

http://www.spatialpoint.com/desktop/desktop-apps-dev-table/

Can you help either with a way to fully support Bootstrap table classes, or to use your shortcodes for tables, but be able to somehow ad style to individual cells?

Thanks!

[David Martin – Support]

Hi,

An easy way to do this is to generate your table shortcode using the Swift Framework shortcode generator, view the page where this is output and then copy the actual table HTML back into the text editor “Text” view tab replacing the shortcode.

You can then edit the table code and add your own classes:

<table class="sf-table striped_minimal"><tbody>
<tr>
<th>HEAD COL 1</th>
<th>HEAD COL 2</th>
<th>HEAD COL 3</th>
</tr>
<tr>
<td>ROW 1 COL 1</td>
<td>ROW 1 COL 2</td>
<td>ROW 1 COL 3</td>
</tr>
<tr>
<td>ROW 2 COL 1</td>
<td>ROW 2 COL 2</td>
<td>ROW 2 COL 3</td>
</tr>
<tr>
<td>ROW 3 COL 1</td>
<td>ROW 3 COL 2</td>
<td>ROW 3 COL 3</td>
</tr>
</tbody></table>

Would result in:

[mgma]

Thanks David. This works, but it’s not respponsive on mobile. Meaning it does NOT scroll horizontally at mobile resolutions… the last 3 columns are just gone… off screen.

http://www.spatialpoint.com/desktop/desktop-apps-dev-table/

Can you help?

[David Martin – Support]

Hi,

By default our tables should fold up nicely: http://uplift.swiftideas.com/elements/tables/

Can you add your WP login so I can copy your shortcodes to my local dev for testing?