Как обеспечить, чтобы каждая ячейка таблицы стала квадратной без использования фиксированных размеров? И будьте отзывчивыми, когда они меняют ширину.
table {
width: 90%;
}
td {
width: 30%;
}
tr {
/** what should go here? **/
}<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<table>
Вы можете использовать технику, описанную в разделе Сетка ответных квадратов.
Адаптированный к вашему компьютеру с помощью таблицы и квадратных ячеек таблицы, он будет выглядеть следующим образом:
table {
width: 90%;
}
td {
width: 33.33%;
position: relative;
}
td:after {
content: '';
display: block;
margin-top: 100%;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: gold;
}<table>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<table>Вот мой код: http://jsfiddle.net/vRLBY/1/
Ключ должен использовать:
td { width: 33%; padding-bottom: 33%; height: 0; }
td div { position: absolute }
потому что padding-bottom определяется по ширине. Дополнительная информация: http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
Примечание: Ранее я опубликовал неработающий код (см. здесь). Спасибо @web-tiki за сообщение об ошибке; -)
Если кто-то ищет решение, которое не требует свойства фиксированной width (даже в процентах), вот что я придумал на основе приведенных выше ответов и ссылки из утвержденного ответа:
td {
height: 0;
&:after, &:before {
content: '';
display: block;
padding-bottom: calc(50% - 0.5em);
}
}
Это вроде хромает, но убивает двух зайцев одним выстрелом: