Tailwind - Table 테이블

tailwind 로 Table 을 만들어봅니다.

import React from 'react'
import MainLayout from '../../layouts/MainLayout'

const Table = () => {
  return (
    <MainLayout>
      <div className="sm:p-24 px-4 py-12 flex flex-col justify-center items-center">
        <h3 className="pb-10 font-bold text-4xl">
          Table
        </h3>
        <div className="inline-block min-w-full shadow-md rounded-lg overflow-hidden">
          <table className="min-w-full leading-normal">
            <thead>
              <tr>
                <th
                  className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"
                >
                  고객명
                </th>
                <th
                  className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider hidden md:table-cell"
                >
                  전화번호 / 이메일
                </th>
                <th
                  className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider hidden md:table-cell"
                >
                  가입 일자
                </th>
                <th
                  className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider hidden sm:table-cell"
                >
                  상태
                </th>
                <th
                  className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right"
                ></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div className="flex">
                    <div className="flex-shrink-0 w-10 h-10">
                      <img
                        className="w-full h-full rounded-full border"
                        src="https://i.imgur.com/CbuD3gl.png"
                        alt=""
                      />
                    </div>
                    <div className="ml-3">
                      <p className="text-gray-900 whitespace-no-wrap">
                        알로하
                      </p>
                      <p className="text-gray-600 whitespace-no-wrap hidden md:block">Lv.100</p>
                    </div>
                  </div>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell">
                  <p className="text-gray-900 whitespace-no-wrap">010-0000-0000</p>
                  <p className="text-gray-600 whitespace-no-wrap">wwwaloha@kakao.com</p>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell">
                  <p className="text-gray-900 whitespace-no-wrap">2025/01/01</p>
                  <p className="text-gray-600 whitespace-no-wrap">3 일전</p>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden sm:table-cell">
                  <span
                    className="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
                  >
                    <span
                      aria-hidden
                      className="absolute inset-0 bg-green-200 opacity-50 rounded-full"
                    ></span>
                    <span className="relative">활동중</span>
                  </span>
                </td>
                <td
                  className="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right"
                >
                  <button
                    type="button"
                    className="inline-block text-gray-500 hover:text-gray-700"
                  >
                    <svg
                      className="inline-block h-6 w-6 fill-current"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                      />
                    </svg>
                  </button>
                </td>
              </tr>
              <tr>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div className="flex">
                    <div className="flex-shrink-0 w-10 h-10">
                      <img
                        className="w-full h-full rounded-full border"
                        src="https://i.imgur.com/PqgZlA0.png"
                        alt=""
                      />
                    </div>
                    <div className="ml-3">
                      <p className="text-gray-900 whitespace-no-wrap">
                        김조은
                      </p>
                      <p className="text-gray-600 whitespace-no-wrap hidden md:block">Lv.50</p>
                    </div>
                  </div>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell">
                  <p className="text-gray-900 whitespace-no-wrap">010-0000-0000</p>
                  <p className="text-gray-600 whitespace-no-wrap">wwwaloha@kakao.com</p>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell">
                  <p className="text-gray-900 whitespace-no-wrap">2025/01/01</p>
                  <p className="text-gray-600 whitespace-no-wrap">3 일전</p>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden sm:table-cell">
                  <span
                    className="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
                  >
                    <span
                      aria-hidden
                      className="absolute inset-0 bg-green-200 opacity-50 rounded-full"
                    ></span>
                    <span className="relative">활동중</span>
                  </span>
                </td>
                <td
                  className="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right"
                >
                  <button
                    type="button"
                    className="inline-block text-gray-500 hover:text-gray-700"
                  >
                    <svg
                      className="inline-block h-6 w-6 fill-current"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                      />
                    </svg>
                  </button>
                </td>
              </tr>
              <tr>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                  <div className="flex">
                    <div className="flex-shrink-0 w-10 h-10">
                      <img
                        className="w-full h-full rounded-full border"
                        src="https://i.imgur.com/vmkZm6D.png"
                        alt=""
                      />
                    </div>
                    <div className="ml-3">
                      <p className="text-gray-900 whitespace-no-wrap">
                        신준수
                      </p>
                      <p className="text-gray-600 whitespace-no-wrap hidden md:block">Lv.1</p>
                    </div>
                  </div>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell">
                  <p className="text-gray-900 whitespace-no-wrap">010-0000-0000</p>
                  <p className="text-gray-600 whitespace-no-wrap">wwwaloha@kakao.com</p>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell">
                  <p className="text-gray-900 whitespace-no-wrap">2025/01/01</p>
                  <p className="text-gray-600 whitespace-no-wrap">3 일전</p>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden sm:table-cell">
                  <span
                    className="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
                  >
                    <span
                      aria-hidden
                      className="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
                    ></span>
                    <span className="relative">대기중</span>
                  </span>
                </td>
                <td
                  className="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right"
                >
                  <button
                    type="button"
                    className="inline-block text-gray-500 hover:text-gray-700"
                  >
                    <svg
                      className="inline-block h-6 w-6 fill-current"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                      />
                    </svg>
                  </button>
                </td>
              </tr>
              <tr>
                <td className="px-5 py-5 bg-white text-sm">
                  <div className="flex">
                    <div className="flex-shrink-0 w-10 h-10">
                      <img
                        className="w-full h-full rounded-full border"
                        src="https://i.imgur.com/OD1a0Mv.png"
                        alt=""
                      />
                    </div>
                    <div className="ml-3">
                      <p className="text-gray-900 whitespace-no-wrap">
                        구교찬
                      </p>
                      <p className="text-gray-600 whitespace-no-wrap hidden md:block">Lv.5</p>
                    </div>
                  </div>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell">
                  <p className="text-gray-900 whitespace-no-wrap">010-0000-0000</p>
                  <p className="text-gray-600 whitespace-no-wrap">wwwaloha@kakao.com</p>
                </td>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell">
                  <p className="text-gray-900 whitespace-no-wrap">2025/01/01</p>
                  <p className="text-gray-600 whitespace-no-wrap">3 일전</p>
                </td>
                <td className="px-5 py-5 bg-white text-sm hidden sm:table-cell">
                  <span
                    className="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
                  >
                    <span
                      aria-hidden
                      className="absolute inset-0 bg-red-200 opacity-50 rounded-full"
                    ></span>
                    <span className="relative">비활성화</span>
                  </span>
                </td>
                <td className="px-5 py-5 bg-white text-sm text-right">
                  <button
                    type="button"
                    className="inline-block text-gray-500 hover:text-gray-700"
                  >
                    <svg
                      className="inline-block h-6 w-6 fill-current"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                      />
                    </svg>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </MainLayout>
  )
}

export default Table
JavaScript
복사

<thead>
  <tr>
    <th
      className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"
    >
      고객명
    </th>
    <th
      className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider 
						      hidden md:table-cell"
    >
      전화번호 / 이메일
    </th>
    <th
      className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider 
						      hidden md:table-cell"
    >
      가입 일자
    </th>
    <th
      className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider '
							    hidden sm:table-cell"
    >
      상태
    </th>
    <th
      className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right"
    ></th>
  </tr>
</thead>
JavaScript
복사

•

PC : 고객명, 전화번호/이메일, 가입일자, 상태, (더보기)

•

Tablet : 고객명, 상태, (더보기)

•

mobile : 고객명, (더보기)

반응형 테이블로 구현하기 위해서, 각각 디바이스 별로 출력할 열을 위와 같이 정합니다.

이 때 mobile~PC 까지 출력하는 열을 고객명과 (더보기) 입니다.

hidden 클래스를 지정하면 화면에 출력되지 않습니다.

sm:table-cell 클래스를 지정하면 sm(최소 640px 이상) 사이즈부터 출력할 수 있습니다.

따라서 Tablet 사이즈부터 보여주어야할 상태 열에 아래와 같이 지정하면, 태블릿 정도 사이즈부터 상태 열을 출력할 수 있습니다.

<th
  className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider '
					    hidden sm:table-cell"
>
  상태
</th>
JavaScript
복사

전화번호/이메일, 가입일자 는 태블릿 정도 사이즈보다 조금 더 큰 사이즈부터 보여주어야하므로, md:table-cell 클래스를 지정하여, 태블릿이상부터 PC 사이즈에서 출력되도록 할 수 있습니다.