1. Table chart - Align from center to the left / 2. Center text on phone and iPad only
Hi!
I have 2 issues that I can't seem to solve.
1.) How do I align the text on this table to the left, instead of the default center?
See the pic that all the texts are aligned to the center, but I want everything to align to the left.
here is my current code:
<table>
<thead>
<tr>
<th>Råvaror</th>
<th>Vikt</th>
<th>Näringsvärde per 100g</th>
<th></th>
</tr>
</thead>
<tbody> <tr>
<td>Mjöl</td>
<td>13,55</td>
<td>Energi kJ</td>
<td>898 kJ</td> </tr> </tbody>
<tbody> <tr>
<td>Bagerisikt</td>
<td>3</td>
<td>Energi kcal</td>
<td>212 kJ</td> </tr></tbody>
<td>Jäst</td>
<td>0,6</td>
<td>Fett g</td>
<td>1 g</td> </tr></tbody>
<td>Sirap mörk</td>
<td>3</td>
<td style="font-weight: 100; font-size: 12px;">varav mättat g</td>
<td>0,2 g</td> </tr></tbody>
<td>Lingonsylt</td>
<td>2,6</td>
<td>Kolhydrater g</td>
<td>44 g</td> </tr></tbody>
<td>Malt och vört</td>
<td>1,34</td>
<td style="font-weight: 100; font-size: 12px;">varav sockerarter g</td>
<td>10 g</td> </tr></tbody>
<td>Anis och fänkål</td>
<td>0,08</td>
<td>Kostfibrer g</td>
<td>2 g</td> </tr></tbody>
<td>Vatten</td>
<td>8,65</td>
<td>Protein g</td>
<td>5,8 g</td> </tr></tbody>
<td></td>
<td></td>
<td>Salt g</td>
<td>0,66 g</td> </tr></tbody>
<td></td>
<td></td>
<td>Vattenhalt g</td>
<td>39 g</td> </tr></tbody>
</table>
-----------------------------------------------------------------------
2.) How do I center these 2 text columns so that they are centered ONLY on iPads, etc and phone? As you can see it looks good on the computer version, but it looks kinda weird when i change to iPad and mobile. Is it possible to make then "centered" instead of right and left when on iPad and phone devices?
Here are some screens: First is Laptop, second is iPad and the last is phone.
Thx a mill!!
Comments
table th, table td {Please know that this css will be used on all tabled on your website, if you want to target this table only please add a custom class to thetext-align:left !important;
}
thanks