Hi Guys
Can anyone tell me if it is possible by some simple css / plugin / and or settings to make my tables responsive in mobile view or to any size screen. I have tried a stackable plugin but it didn’t work in an attractive way. Thanks in advance for any help.
<table style=”height: 425px;” border=”1″ width=”816″>
<tbody>
<tr>
<td width=”104″>
<p id=”pagetitle” style=”text-align: center;”>(Temp °C)</p>
</td>
<td style=”text-align: center;” width=”30″>Jan</td>
<td style=”text-align: center;” width=”38″>Feb</td>
<td style=”text-align: center;” width=”43″>Mar</td>
<td style=”text-align: center;” width=”43″>Apr</td>
<td style=”text-align: center;” width=”43″>May</td>
<td style=”text-align: center;” width=”44″>June</td>
<td style=”text-align: center;” width=”43″>July</td>
<td style=”text-align: center;” width=”43″>Aug</td>
<td style=”text-align: center;” width=”43″>Sep</td>
<td style=”text-align: center;” width=”43″>Oct</td>
<td style=”text-align: center;” width=”43″>Nov</td>
<td style=”text-align: center;” width=”43″>Dec</td>
</tr>
<tr>
<td width=”104″>
<p style=”text-align: center;”>Zagreb</p>
</td>
<td style=”text-align: center;” width=”30″>0</td>
<td style=”text-align: center;” width=”38″>1.2</td>
<td style=”text-align: center;” width=”43″>5.5</td>
<td style=”text-align: center;” width=”43″>11</td>
<td style=”text-align: center;” width=”43″>16</td>
<td style=”text-align: center;” width=”44″>18.7</td>
<td style=”text-align: center;” width=”43″>22.3</td>
<td style=”text-align: center;” width=”43″>21.8</td>
<td style=”text-align: center;” width=”43″>15.6</td>
<td style=”text-align: center;” width=”43″>12.3</td>
<td style=”text-align: center;” width=”43″>5.4</td>
<td style=”text-align: center;” width=”43″>2.3</td>
</tr>
<tr>
<td width=”104″>
<p style=”text-align: center;”>Split</p>
</td>
<td style=”text-align: center;” width=”30″>7.5</td>
<td style=”text-align: center;” width=”38″>8.5</td>
<td style=”text-align: center;” width=”43″>11.5</td>
<td style=”text-align: center;” width=”43″>12.8</td>
<td style=”text-align: center;” width=”43″>18.9</td>
<td style=”text-align: center;” width=”44″>23.9</td>
<td style=”text-align: center;” width=”43″>26.7</td>
<td style=”text-align: center;” width=”43″>26.1</td>
<td style=”text-align: center;” width=”43″>22.8</td>
<td style=”text-align: center;” width=”43″>16.7</td>
<td style=”text-align: center;” width=”43″>12.5</td>
<td style=”text-align: center;” width=”43″>9.5</td>
</tr>
<tr>
<td style=”text-align: center;” width=”104″>Dubrovnik</td>
<td style=”text-align: center;” width=”30″>8.3</td>
<td style=”text-align: center;” width=”38″>9.1</td>
<td style=”text-align: center;” width=”43″>11.2</td>
<td style=”text-align: center;” width=”43″>13.9</td>
<td style=”text-align: center;” width=”43″>17.8</td>
<td style=”text-align: center;” width=”44″>22.2</td>
<td style=”text-align: center;” width=”43″>25.6</td>
<td style=”text-align: center;” width=”43″>25.0</td>
<td style=”text-align: center;” width=”43″>22.3</td>
<td style=”text-align: center;” width=”43″>17.8</td>
<td style=”text-align: center;” width=”43″>12.9</td>
<td style=”text-align: center;” width=”43″>10.2</td>
</tr>
<tr>
<td colspan=”13″ width=”601″>
<p style=”text-align: right;”>Based on weather averages</p>
</td>
</tr>
</tbody>
</table>
Couple of things:
a) never use inline styles for HTML anymore
b) only use CSS classes
e.g.
.mycenter{text-align:center}
then use that class on your td cells.
c) in responsive layouts, table cells would be percentages, not pixels, such as
.td7{width:7%}
d) to have a table cell be ‘responsive’ each row would need to be able to reduce in size; however on phone it would get cut off, and you’d need to use an overflow class to hide that.
(See the ‘bootstrap’ css classes for examples.)
For responsive columns, you’re better off using a grid system with custom CSS.
There might be a tables plugin for WordPress you could look at which builds all this into one thing for you.
This is actually one of the reasons we’re moving all our sites back to Bootstrap, for this kind of stuff.
However, TagDiv might have a built-in class setup for tables; and it wouldn’t hurt to inspect the main style.css file yourself to look for table classes in there.
Food for thought, anyway 🙂
( I don’t work here. )
