Отзывчивый Div Таблица

Question

Я попытался создания таблицы Div с этого сайта: http://divtable.com/generator/

Однако, все работает нормально за отзывчивость таблицы Div исключением. При минимизации ширины браузера я бы хотел, чтобы он был полностью отзывчив. Например, я хотел бы, чтобы он показывал два элемента в строке на мобильных устройствах.

Вот код, я использую для этого:

.divTable{ 
 
    display: table; 
 
    width: 100%; 
 
text-align: center; 
 

 
} 
 
.divTableRow { 
 
    display: table-row; 
 
} 
 
.divTableHeading { 
 
    background-color: #ffffff; 
 
    display: table-header-group; 
 
} 
 
.divTableCell, .divTableHead { 
 
    border: 1px solid #ffffff; 
 
    display: table-cell; 
 
    padding: 3px 10px; 
 
} 
 
.divTableHeading { 
 
    background-color: #ffffff; 
 
    display: table-header-group; 
 
    font-weight: bold; 
 
} 
 
.divTableFoot { 
 
    background-color: #ffffff; 
 
    display: table-footer-group; 
 
    font-weight: bold; 
 
} 
 
.divTableBody { 
 
    display: table-row-group; 
 
}

<div class="divTable"> 
 
<div class="divTableBody"> 
 
<div class="divTableRow"> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone4Parts.png?11283548812375177185" alt="" width="200" height="200" /> <br />iPhone 4 Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone4sParts.jpg?3165596616796717679" alt="" width="200" height="200" /> <br />iPhone 4s Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5Parts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5 Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5cwhite.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone 5c Parts</div> 
 
</div> 
 
<div class="divTableRow"> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5sParts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5s Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhoneSEParts.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone SE Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6Parts.jpg?18059291597630475032" alt="" width="200" height="200" /> <br />iPhone 6 Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6PlusParts.jpg?9610561940146358986" alt="" width="200" height="200" /> <br />iPhone 6 Plus Parts</div> 
 
</div> 
 
<div class="divTableRow"> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6sParts.jpg?11014928492319611631" alt="" width="200" height="200" /> <br />iPhone 6s Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6sPlusParts.jpg?8400309241132689431" alt="" width="200" height="200" /> <br />iPhone 6s Plus Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone7Parts.jpg?7760410424665462960" alt="" width="200" height="200" /> <br />iPhone 7 Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone7PlusParts.jpg?9544342566201088259" alt="" width="200" height="200" /> <br />iPhone 7 Plus Parts</div> 
 
</div> 
 
</div> 
 
</div>

Answer 1

Я предлагаю вам использовать загрузчик, я переработан код, используя загрузочный стиль CSS. Я использовал для большого рабочего стола класс col-md-3. Этот класс дает каждому из div, включая ваши изображения, ширину 25%, когда экран больше 992px, поэтому каждый «row» div будет иметь 4 столбца на этой заданной ширине. Когда экран меньше, чем 992px, но больше, чем 750px, я применил col-sm-6, чтобы на экране было всего 2 изображения для строки. Ширина col-md-6 в файле bootstrap.css устанавливается равной 50%. Максимальное количество столбцов в бутстрапе составляет 12, col-sm-6 означает 6 столбцов. Для небольших устройств я просто использовал медиа-запрос для максимального размера 320 пикселей, на смартфоне будет отображаться только 1 элемент для строки. В запросе на медиаданные вы можете настроить пользовательские правила CSS для определенной ширины окна. Вы можете проверить код ниже и научиться использовать загрузчик на многих сайтах или по следующей ссылке:

http://getbootstrap.com/

При использовании bootsrap, вам нужно будет включить в файл головы, прежде чем ваш main.css укажите ссылку на загрузочный CDN или локальный файл начальной загрузки. Вы должны включить этот файл начальной загрузки перед своей таблицей стилей, чтобы вы могли перезаписать это правило с помощью своих пользовательских правил.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link href="main.css" rel="stylesheet" /> 
    </head> 

    <body> 

    <div class="row"> 
     <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone4Parts.png?11283548812375177185" alt="" width="200" height="200" /> <br />iPhone 4 Parts 
     </div> 
     <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone4sParts.jpg?3165596616796717679" alt="" width="200" height="200" /> <br />iPhone 4s Parts 
     </div> 
     <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone5Parts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5 Parts 
     </div> 
     <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone5cwhite.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone 5c Parts 
     </div> 
    </div> 

    </body> 
</html> 

Это CSS

.divTableCell, .divTableHead { 
    border: 1px solid #ffffff; 
    /*display: table-cell; 
    padding: 3px 10px;*/ 
    text-align: center; 
} 

@media (max-width: 320px) { 
    .divTableCell { 
     width: 100%; 
    } 
} 

Answer 2

Если вы просто хотите, отзывчивый таблицу .... Использовать библиотеку Bootstrap, создать

<table class="table-responsive"> 
<tbody class="table"></tbody> 
</table> 

, и вам хорошо идти ... читать дальше здесь:
http://v4-alpha.getbootstrap.com/content/tables/ http://www.w3schools.com/bootstrap/bootstrap_tables.asp

Примечание: настройка ширины и высоты в Pixel всегда не очень хорошая практика, если вы хотите конкретный ДИВ быть отзывчивыми. Поскольку Pixel устанавливает FIXED ширину и высоту div, которые не изменят размер независимо от того, что.

вы можете попробовать самозагрузки библиотеку, или установить ширину и высоту в процентах

width="100%"