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 사이즈에서 출력되도록 할 수 있습니다.