[HTML] Div 를 이용하여 Table Grid 만들기 - SAMPLE CODE

HTML CSS - Div 를 이용하여 Table Grid 만들기 - SAMPLE CODE

 

- 미디어쿼리를 이용한 반응형 Table 목록이 필요하여...만들었다
  ....그런데...다른 방법이 더 좋아서...사용 안함...제귈..

 

<style>
	.yym-grid-thead{    display: none;  }
	.yym-grid-tbody div{
		border: 1px solid #cccccc;
		text-align: center;
	}
	.yym-grid-tbody{
		width:100%;
		border: 0px solid #cccccc;
		padding: 5px 5px 5px 5px;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.yym-grid-tbody .item_name{
		background-color: rgba(0,0,0,0.1);
		font-weight: bold;
		text-align: center;
	}
	ul.pagination{  float: right;   }

	@media all and (min-width: 768px) {
		.yym-grid-thead {
			width:100%;
			display: grid;
			grid-template-columns: 8% 11% 11% 11% 11% 11% 11% 11% 15%;

		}
		.yym-grid-thead div{
			border: 1px solid #cccccc;
			background-color: rgba(0,0,0,0.1);
			font-weight: bold;
			text-align: center;
		}

		.yym-grid-tbody {
			width:100%;
			border: 0px solid #cccccc;
			padding: 0px 0px 0px 0px;
			display: grid;
			grid-template-columns: 8% 11% 11% 11% 11% 11% 11% 11% 15%;
			overflow: hidden;
		}
		.yym-grid-tbody .item_name{display: none;}
	}
</style>



<!-- @ Table Tr Header -->
<div class="yym-grid-thead">
	<div> Field_Name_01               </div>
	<div> Field_Name_02               </div>
	<div> Field_Name_03               </div>
	<div> Field_Name_04               </div>
	<div> Field_Name_05               </div>
</div>
<!-- @ Table Tr Body -->
<div class="yym-grid-tbody">
	<div class="item_name"> Field_Name_01              </div>
	<div class="item_value"> Field_Value               </div>
	
	<div class="item_name"> Field_Name_02              </div>
	<div class="item_value"> Field_Value               </div>

	<div class="item_name"> Field_Name_03              </div>
	<div class="item_value"> Field_Value               </div>
	
	<div class="item_name"> Field_Name_04              </div>
	<div class="item_value"> Field_Value               </div>

	<div class="item_name"> Field_Name_05              </div>
	<div class="item_value"> Field_Value               </div>

</div>
</br>
<div class="yym-grid-tbody">
	<div class="item_name"> Field_Name_01              </div>
	<div class="item_value"> Field_Value               </div>
	
	<div class="item_name"> Field_Name_02              </div>
	<div class="item_value"> Field_Value               </div>

	<div class="item_name"> Field_Name_03              </div>
	<div class="item_value"> Field_Value               </div>
	
	<div class="item_name"> Field_Name_04              </div>
	<div class="item_value"> Field_Value               </div>

	<div class="item_name"> Field_Name_05              </div>
	<div class="item_value"> Field_Value               </div>

</div>
</br>