My HTML and CSS structure is as follows:
.item {
background: white;
padding: 5px;
display: inline-block;
text-align: center;
}
.item > div {
background: yellow;
width: 60px;
height: 60px;
border-radius: 50%;
display: table-cell;
vertical-align: middle;
}
table{
width: 100%;
}<table>
<tr>
<td><div class="item"><div>0</div></div></td>
<td><div class="item"><div>1</div></div></td>
<td><div class="item"><div>2</div></div></td>
<td><div class="item"><div>3</div></div></td>
<td><div class="item"><div>4</div></div></td>
<td><div class="item"><div>5</div></div></td>
<td><div class="item"><div>6</div></div></td>
<td><div class="item"><div>7</div></div></td>
<td><div class="item"><div>8</div></div></td>
<td><div class="item"><div>9</div></div></td>
<td><div class="item"><div>10</div></div></td>
</tr>
</table>I am looking for a way to use flex-wrap: wrap on this table without using flexbox because I am working with an email template that does not support modern styling methods like flexbox or grid. I need to maintain the current table layout without causing any responsiveness issues.
Check out the current support of flex-wrap in emails here: doc