Мой предыдущий ответ был гипотетической общей концепцией того, как go о сетках.
Что касается моего решения, я бы не разработал его с помощью таблиц, потому что таблицы могут создавать ограничения дизайна для расширения дизайна. Однако, если вам нужно, то можно использовать таблицы.
Опять же, я бы пошел другим путем, если бы мне пришлось заново перекодировать.
Я добавил немного @media Решения.
Также, чтобы иметь в виду, когда вы используете адаптивный дизайн и хотите выровнять свои изображения внутри сеток, убедитесь, что все они имеют одинаковый размер. Даже разница в 1 пиксель может вызвать головную боль.
В моем примере я настроил размеры изображения по 200 пикселей по высоте и ширине каждый. Даже если на вашем экране все в порядке, есть различия, когда изображения становятся больше, и даже сейчас одно выглядит меньше другого, если оставить его таким.
Что еще более важно, я изменил ваше изображение с .png на .jpg. Если вам не нужен прозрачный фон на изображении, вы можете использовать .png, в противном случае используйте .jpg, поскольку он меньше по размеру и полезнее для загрузки страницы. Кроме того, если вы собираетесь использовать изображения в виде миниатюр, размер изображения в 200 пикселей слишком велик, уменьшите их до 60 пикселей или около того, в зависимости от размера экрана.
.games-table{
padding: 30px;
}
.gameRow{
box-shadow: 0px 0px 6px 0px;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 20px;
cursor: pointer;
}
.gameRow:hover{
box-shadow: 0px 0px 15px 0px;
}
.gameNo{
margin-bottom: 0px;
}
.gameNo, .imgBox, .courtBox{
text-align: center;
}
li{
list-style-type: none;
}
.imgteam1, .imgteam2{
width: 48px;
height:auto;
}
.gamenum-box{
background-color: #000066;
color: #ffffff;
}
.gamenum-box, .imgBox, .courtBox{
padding: 20px 20px;
}
.datetimeBox{
padding: 5px 5px;
}
.vs-span{
margin: 0px 10px;
}
th,td{
padding: 0px 10px;
}
th{
border-bottom: 1px solid #cccccc;
}
.datetimeBox{
color: #000000;
border-width: 3px;
border-style: solid;
border-image: linear-gradient(to top, #cccccc, rgba(0, 0, 0, 0) ) 1 100%;
background-image: linear-gradient(80deg, #f1f1f1 , white, #f1f1f1);
transform: skew(-10deg, 0deg);
}
table{
transform: skew(10deg, 0deg);
width: 100%;
}
#games{
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.newDiv{
width:50%;
}
.gamenum-box, .courtBox {
width: 20%;
}
.datetimeBox{
width:30%;
}
.imgBox{
width:30%;
}
.gameVis{
display: none;
}
@media (min-width: 766px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
padding-right: 5px !important;
padding-left: 5px !important;
}
.container {
padding-right: 5px;
padding-left: 5px;
}
.imgbox {
padding-right: 5px;
padding-left: 5px;
}
.imgteam1, .imgteam2{
width: 30.3333% !important;
}
.imgbox {
width: 100%;
}
th,td{
padding: 0px 1px;
}
p, ul, blockquote, pre, td, th, label {
margin: 0;
font-size: 80%;
line-height: 1.5em;
}
}
@media (min-width: 601px) {
.container {
padding-right: 15px;
padding-left: 15px;
}
.imgbox {
padding-right: 5px;
padding-left: 5px;
}
.imgteam1, .imgteam2{
width: 33.3333%;
}
.imgbox {
width: 100%;
}
th,td{
padding: 0px 1px;
}
p, ul, blockquote, pre, td, th, label { /* This part I extended to other style designs as well */
margin: 0;
font-size: 80%;
line-height: 1.5em;
}
}
@media only screen and (max-width:600px){
.games-table{
padding:10px;
}
.newDiv{
width:100%;
}
.imgteam1, .imgteam2{
width: 27px;
}
.gamenum-box, .imgBox, .courtBox{
padding: 16px 1px;
}
th,td{
padding: 0px 1px;
}
p, ul, blockquote, pre, td, th, label { /* This part I extended to other style designs as well */
margin: 0;
font-size: 80%;
line-height: 1.5em;
}
}
@media only screen and (max-width:480px){
.games-table{
padding: 5px;
}
/* .gameNoVis{
display: none;
}
.gameVis{
display: block;
} */
.gamenum-box{
width: 13%;
}
.imgBox{
width: 32%;
}
.datetimeBox{
width: 40%;
}
.courtBox {
width: 15%;
}
p, ul, blockquote, pre, td, th, label { /* This part I extended to other style designs as well */
margin: 0;
font-size: 80%;
line-height: 1.5em;
margin-bottom: 1.5em;
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Stylesheets -->
<link href="bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="game_team.css" />
</head>
<div class="game-table">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="head mb-4">
<h2>Matches</h2>
</div>
</div>
</div>
<div class="row">
<!-- Start Games Section 1 -->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div id="games">
<div class="row gameRow">
<div class="gamenum-box col-md-2">
<p class="gameNo">GAME</p>
<p class="gameNo">1</p>
</div>
<div class="imgBox col-md-4">
<img src="https://i.stack.imgur.com/XjbQJ.png" class="imgteam1">
<span class="vs-span">VS</span>
<img src="https://i.stack.imgur.com/mJdIz.png" class="imgteam2">
</div>
<div class="datetimeBox col-md-4">
<table>
<tr>
<th><b>Date</b></th>
<th><b>Time</b></th>
</tr>
<tr>
<td><b>12 Jan 2019</b></td>
<td><b>12:00PM</b></td>
</tr>
</table>
</div>
<div class="courtBox col-md-2">
<p class="gameNo">COURT</p>
<p class="gameNo">1</p>
</div>
</div>
</div>
</div>
<!-- End Games Section 1 -->
<!-- Start Games Section 2 -->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div id="games">
<div class="row gameRow">
<div class="gamenum-box col-md-2">
<p class="gameNo">GAME</p>
<p class="gameNo">2</p>
</div>
<div class="imgBox col-md-4">
<img src="https://i.stack.imgur.com/XjbQJ.png" class="imgteam1">
<span class="vs-span">VS</span>
<img src="https://i.stack.imgur.com/mJdIz.png" class="imgteam2">
</div>
<div class="datetimeBox col-md-4">
<table>
<tr>
<th><b>Date</b></th>
<th><b>Time</b></th>
</tr>
<tr>
<td><b>12 Jan 2019</b></td>
<td><b>12:00PM</b></td>
</tr>
</table>
</div>
<div class="courtBox col-md-2">
<p class="gamebox">COURT</p>
<p class="gameNo">2</p>
</div>
</div>
</div>
</div>
<!-- End Games Section 2 -->
</div>
</div>
</div>