jquery - Table을 DIV로 표현하기 (예제)

가끔 DIV를 테이블과 같이 사용할 경우가 생깁니다.

아래는 제가 사용할때 참고한 예제 입니다

<!doctype html>
<html lang="kr">
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style>
    .container {
      display: table;
      }
 
    .row  {
      display: table-row;
      }
 
    .left, .middle, .right {
      display: table-cell;
      }
    </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
    $('form input').keydown(function(e) {
        if (e.keyCode == 13) {
            $('form').submit();
        }
    });
  </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="left" style="background-color:red">
                <h4>1.Left Col</h4>
            </div>
 
            <div class="middle" style="background-color:yellow">
                <h4>1.Middle Col</h4>
            </div>
 
            <div class="right" style="background-color:blue">
                <h4>1.Right Col</h4>
            </div>
        </div>
        <div class="row">
            <div class="left" style="background-color:purple">
                <h4>2.Left Col</h4>
            </div>
 
            <div class="middle" style="background-color:green">
                <h4>2.Middle Col</h4>
            </div>
 
            <div class="right" style="background-color:pink">
                <h4>2.Right Col</h4>
            </div>
        </div>
    </div>
</body>
</html>

Table을 DIV로 표현하기 (예제)

단축키

Articles