Hey guys im trying to figure out why my table keeps doing this when I switch to the mobile version, ive tried multiple different CSS edits to fix it, but whenever I got into mobile it shows like this
1 Answers
Try this Modified some styles and added width to the <th> tags.
CSS:
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size:13px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th, td {
padding: 8px;
text-align: center;
}
table#t01 tr:nth-child(even) {
background-color: #fff;
}
table#t01 tr:nth-child(odd) {
background-color: #eee;
}
table#t01 th {
background-color: #eee;
}
TABLE:
<table id="t01">
<tr>
<th>Size</th>
<th>Bust</th>
<th>Sleeve</th>
<th width="20%">Shoulder</th>
<th width="15%">Length</th>
</tr>
<tr>
<td>S</td>
<td>102</td>
<td>61</td>
<td>45</td>
<td>37</td>
</tr>
<tr>
<td>M</td>
<td>106</td>
<td>62</td>
<td>46</td>
<td>38</td>
</tr>
<tr>
<td>L</td>
<td>110</td>
<td>63</td>
<td>47</td>
<td>39</td>
</tr>
</table>
Related