table 태그 없이 table 만들기

홈페이지 소스

[소스] table 태그 없이 table 만들기

2022.05.24

[북마크(작업중)] [작성자 정보]

작성자

꿘쓰

작성일/수정일

2022-05-24 21:52:18 / 2022-05-24 21:52:18

table 태그 없이 table 만들기

http://relation.co.kr/images_board/board_system_publishing/288/index.php


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR?PAR_NO=5&NO=288</title>

<style>
  .wrap  {  display:flex; justify-content:center; align-items:center; width:100vw; height:100vh; }
  .wrap .cell  { display:flex; flex-wrap:wrap;   width:300px; height:100px; background:#fff; border:1px solid #000;  }
  .wrap .cell .art { position:relative; display:flex; justify-content:center; align-items:center; width:100px; height:50px;  background:#fff; }
  .wrap .cell .art:before { content:""; position:absolute; right:1px; bottom:0px; width:100%; height:1px; background:#000; }
  .wrap .cell .art:after { content:""; position:absolute; right:1px; top:0; width:1px; height:100%; background:#000; }
  .wrap .cell .art:nth-child(3n):after { content:""; position:absolute; right:1px; top:0; width:0px; }
  .wrap .cell .art:nth-child(4):before, 
  .wrap .cell .art:nth-child(5):before,
  .wrap .cell .art:nth-child(6):before    {   content:""; position:absolute; right:1px; bottom:0px; width:100%; height:0px; }
  .wrap .cell .art:nth-child(2n)  {  background:#ececec; }
  
</style>  
</head>

<body>
  
  <div class="wrap">
    <div class="cell">
      <div class="art">art1</div>
      <div class="art">art2</div>
      <div class="art">art3</div>
      <div class="art">art4</div>
      <div class="art">art5</div>
      <div class="art">art6</div>
    </div>
  </div>  

  </body>
</html>

이 포스트 공유하기 N

글수정 글삭제 전체목록