CCHub Logo CCHub Tailwind Collection
구성 요소 데이터 테이블 데이터 테이블 구성 요소

데이터 테이블 구성 요소

다크 모드의 반응형 데이터 테이블

미리 보기

HTML 코드 

<div class="container mx-auto p-4">
  <div class="border rounded-lg overflow-hidden">
    <table class="min-w-full bg-white dark:bg-gray-800">
      <thead>
        <tr>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Title</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Author</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 1</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">John Doe</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-27</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 2</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Jane Smith</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-26</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 3</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Peter Jones</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-25</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

관련 구성 요소

Luxury_Premium_Manufacturing_Data_Table

제조/산업용으로 사용되는 복잡하고 반응이 빠른 데이터 테이블 구성 요소로, 흑백 색 구성표와 하나의 밝은 액센트 색상이 있는 고급스러운/프리미엄 디자인이 특징입니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다

레트로 데이터 그리드

Tailwind CSS를 사용하여 80년대/90년대 레트로/빈티지 미학으로 스타일링된 반응형 데이터 테이블 구성 요소입니다. 뭉툭한 디자인, 생생한 색상 악센트(밝은 모드의 경우 보라색/주황색, 어두운 모드의 녹색/네온), 향수를 불러일으키는 기술 느낌을 주는 고정 폭 글꼴이 특징입니다. 테이블에는 고유한 헤더 및 행 스타일, 아바타 및 상태 배지와 같은 테두리 요소가 포함되며 CSS를 통해 다크 모드를 지원합니다. 자리 표시자 데이터에는 사용자 아바타, 연락처 정보, 상태 배지, 역할 및 조인 날짜가 포함됩니다. 테이블은 더 나은 응답성을 위해 더 작은 화면에서 가로로 스크롤할 수 있습니다.

열다

데이터 테이블 구성 요소

레트로/빈티지 스타일을 테마로 한 반응형 데이터 테이블 구성 요소로, Tailwind CSS로 디자인되어 다크 모드를 지원하고 80/90년대의 향수를 불러일으키는 디자인 요소를 특징으로 합니다.

열다