Я думаю, что будет легче достичь желаемого результата, используя flexbox:
.row-type {
display: flex;
flex-wrap: wrap;
}
.cell-type {
flex: 0 0 10%
/* translates to: flex-grow: 0;
* flex-shrink: 0;
* flex-basis: 10%;
*/
}
.cell-type:nth-child(even) {
flex-basis: 15%;
/* 10% + 15% = 25% */
}
Но первая проблема, которую вам нужно решить, это применить box-sizing:border-box ко всем вашим клеткам.Это изменит способ учета отступов и границ, которые будут включены в свойство width (или flex-basis для flexbox), поэтому вам не нужно устанавливать проценты и вычитать размеры отступов и границ.
Тогда нужно просто указать правильные размеры ваших ячеек на основе родительской ширины.Для этого выберите направление (от большого к маленькому или от маленького к большому).Я выбирал от большого к маленькому внизу, но делал это и от маленьких до больших работ.
Напишите правила для вашего первого выбранного интервала вне любого @media запроса до @media запросов (это важно, потому что селекторы внутри ваших @media запросов будут иметь одинаковую специфичностьдля тех, кто находится снаружи, и правила внутри @media будут применяться исключительно в том случае, если они размещены позже в CSS).
Помните: @media запросы не изменяют специфичность.Они только устанавливают, применяются ли правила внутри на основании предоставленного условия.Таким образом, правила, установленные до запросов @media, будут применяться только в том случае, если ни один из ваших последующих запросов @media (переопределяя их) не будет верным.
Затем, используя те же самые точные селекторы, напишите свои правила для следующего интервалавнутри соответствующего правила @media и продолжайте, пока не дойдете до последнего правила @media.Вам нужно только перезаписать изменяемое свойство, которое в данном случае равно flex-basis.В случае таблиц это будет width.
Я также считаю, что ваши контрольные точки немного смещены, так как 700px и 500px слишком низки как точки прерывания для вашей таблицы (Iрешил разбить их с 8 на 6 / ряд на 1200px, с 6 на 4 / ряд на 950px и с 4 на 2 / ряд на 650px).Не стесняйтесь не соглашаться и корректировать их в соответствии с вашими потребностями и предпочтениями.
Вот оно:
.table-type {
margin-bottom: 5px;
width: 100%;
}
.row-type {
display: flex;
flex-wrap: wrap;
align-items: stretch; /* you might also try `center` here */
}
.cell-type {
display: block;
flex: 0 0 10%;
margin: 3px 0;
padding: 7px 12px;
line-height: 16px;
min-height: 46px; /* added for equal height cells. removed on mobile */
font-family: 'Lato', sans-serif;
border-radius: 16px;
box-sizing: border-box;
}
.cell-type:nth-child(odd) {
text-align: right;
}
.cell-type:nth-child(even) {
flex-basis: 15%;
font-weight: bold;
background-color: #eaf5f5;
box-shadow: inset 0 1px 3px rgba(0,0,0,.06), inset 0 1px 1px rgba(0,0,0,.04), inset 0 2px 1px rgba(0,0,0,.03)
}
@media(max-width: 1200px) {
.cell-type:nth-child(odd) {
flex-basis: 13.3333%;
}
.cell-type:nth-child(even) {
flex-basis: 20%;
}
}
@media(max-width: 950px) {
.cell-type:nth-child(odd) {
flex-basis: 20%;
}
.cell-type:nth-child(even) {
flex-basis: 30%;
}
}
@media(max-width: 650px) {
.cell-type {
min-height:0;
}
.cell-type:nth-child(odd) {
flex-basis: 40%;
}
.cell-type:nth-child(even) {
flex-basis: 60%;
}
}
<div class='table-type'>
<div class='row-type'>
<div class='cell-type'>Account</div>
<div class='cell-type'>Acme Incorporated US and Seychelles</div>
<div class='cell-type'>Geography</div>
<div class='cell-type'>North America</div>
<div class='cell-type'>Premier</div>
<div class='cell-type'>Yes</div>
<div class='cell-type'>Countact Count</div>
<div class='cell-type'>23</div>
<div class='cell-type'>Account Manager</div>
<div class='cell-type'>Dustin Brown</div>
<div class='cell-type'>Customer Engineer</div>
<div class='cell-type'>David Hoff</div>
<div class='cell-type'>Exec Sponsor</div>
<div class='cell-type'>Jeff Larabee</div>
</div>
</div>
Это также может быть достигнуто с коробочной моделью (с использованием floats).Обратите внимание, display:table (и связанные с ним элементы для подэлементов) и box-model не играют хорошо вместе .И под этим я подразумеваю: чтобы сделать обтекание ячеек там, где вы хотите, вам понадобится один из следующих вариантов:
- фактически обернуть ячейки одного ряда внутри одного отдельного элемента DOM с помощью
display:table-row (вот кактабличная модель работает). - используйте поплавки (блочная модель), установив
display:block в строке и ячейке и float:left в ячейках.Эта техника также нуждается в очистке после правильного конца ячейки строки, чтобы избежать смещения ячеек в неправильном положении, когда у вас есть различия в высоте между ячейками.