Tailwind CSS Tables

Use responsive table component, with helper examples for table column width, bordered and striped tables, pagination, fixed header, overflow, spacing & more.

Basic example

Use the following example of a responsive table component to show multiple rows and columns of text data.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Wild	@twitter

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full text-left text-sm font-light text-surface dark:text-white">
                <thead
                  class="border-b border-neutral-200 font-medium dark:border-white/10">
                  <tr>
                    <th scope="col" class="px-6 py-4">#</th>
                    <th scope="col" class="px-6 py-4">First</th>
                    <th scope="col" class="px-6 py-4">Last</th>
                    <th scope="col" class="px-6 py-4">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
                    <td class="whitespace-nowrap px-6 py-4">Mark</td>
                    <td class="whitespace-nowrap px-6 py-4">Otto</td>
                    <td class="whitespace-nowrap px-6 py-4">@mdo</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
                    <td class="whitespace-nowrap px-6 py-4">Jacob</td>
                    <td class="whitespace-nowrap px-6 py-4">Thornton</td>
                    <td class="whitespace-nowrap px-6 py-4">@fat</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
                    <td class="whitespace-nowrap px-6 py-4">Larry</td>
                    <td class="whitespace-nowrap px-6 py-4">Wild</td>
                    <td class="whitespace-nowrap px-6 py-4">@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Need even more robust tables? Try Data Den.

Quick customization & hyper-focus on data management
Easily integrate it with any project (not only MDB)
Column Pinning, Drag&Drop Columns, Advanced Filtering & much more

For enterprise projects & users seeking advanced data controls. Tailor your data your way.

get early access explore

Variants

Below are the color variations that can be used in the table component.

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full text-center text-sm font-light text-surface dark:text-white">
                <thead
                  class="border-b border-neutral-200 font-medium dark:border-white/10">
                  <tr>
                    <th scope="col" class="px-6 py-4">Class</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Default
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr
                    class="border-b border-primary-200 bg-primary-100 text-neutral-800">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Primary
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr
                    class="border-b border-secondary-200 bg-secondary-100 text-neutral-800">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Secondary
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr
                    class="border-b border-success-200 bg-success-100 text-neutral-800">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Success
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr
                    class="border-b border-danger-200 bg-danger-100 text-neutral-800">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Danger
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr
                    class="border-b border-warning-200 bg-warning-100 text-neutral-800">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Warning
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr
                    class="border-b border-info-200 bg-info-100 text-neutral-800">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Info
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr
                    class="border-b border-neutral-100 bg-neutral-50 text-neutral-800 dark:bg-neutral-50">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Light
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr
                    class="border-b border-neutral-700 bg-neutral-800 text-neutral-50 dark:border-neutral-600 dark:bg-neutral-700">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">
                      Dark
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Striped

Use this example to increase the readability of the data sets by alternating the background colors of every second table row.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full text-left text-sm font-light text-surface dark:text-white">
                <thead
                  class="border-b border-neutral-200 bg-white font-medium dark:border-white/10 dark:bg-body-dark">
                  <tr>
                    <th scope="col" class="px-6 py-4">#</th>
                    <th scope="col" class="px-6 py-4">First</th>
                    <th scope="col" class="px-6 py-4">Last</th>
                    <th scope="col" class="px-6 py-4">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    class="border-b border-neutral-200 bg-black/[0.02] dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
                    <td class="whitespace-nowrap px-6 py-4">Mark</td>
                    <td class="whitespace-nowrap px-6 py-4">Otto</td>
                    <td class="whitespace-nowrap px-6 py-4">@mdo</td>
                  </tr>
                  <tr
                    class="border-b border-neutral-200 bg-white dark:border-white/10 dark:bg-body-dark">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
                    <td class="whitespace-nowrap px-6 py-4">Jacob</td>
                    <td class="whitespace-nowrap px-6 py-4">Thornton</td>
                    <td class="whitespace-nowrap px-6 py-4">@fat</td>
                  </tr>
                  <tr
                    class="border-b border-neutral-200 bg-black/[0.02] dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
                    <td
                      colspan="2"
                      class="whitespace-nowrap px-6 py-4 text-center">
                      Larry the Bird
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Hoverable

Use the hover:{bg-*} utility class from to change the background color of a data row when hovering over the element with the cursor.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Wild	@twitter

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full text-left text-sm font-light text-surface dark:text-white">
                <thead
                  class="border-b border-neutral-200 font-medium dark:border-white/10">
                  <tr>
                    <th scope="col" class="px-6 py-4">#</th>
                    <th scope="col" class="px-6 py-4">First</th>
                    <th scope="col" class="px-6 py-4">Last</th>
                    <th scope="col" class="px-6 py-4">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    class="border-b border-neutral-200 transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-white/10 dark:hover:bg-neutral-600">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
                    <td class="whitespace-nowrap px-6 py-4">Mark</td>
                    <td class="whitespace-nowrap px-6 py-4">Otto</td>
                    <td class="whitespace-nowrap px-6 py-4">@mdo</td>
                  </tr>
                  <tr
                    class="border-b border-neutral-200 transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-white/10 dark:hover:bg-neutral-600">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
                    <td class="whitespace-nowrap px-6 py-4">Jacob</td>
                    <td class="whitespace-nowrap px-6 py-4">Thornton</td>
                    <td class="whitespace-nowrap px-6 py-4">@fat</td>
                  </tr>
                  <tr
                    class="border-b border-neutral-200 transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-white/10 dark:hover:bg-neutral-600">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
                    <td class="whitespace-nowrap px-6 py-4">Larry</td>
                    <td class="whitespace-nowrap px-6 py-4">Wild</td>
                    <td class="whitespace-nowrap px-6 py-4">@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Bordered

Using a bordered table allows you to visibly organize your data with a solid border.

Add the .border class for borders on all sides of the table and cells.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full border border-neutral-200 text-center text-sm font-light text-surface dark:border-white/10 dark:text-white">
                <thead
                  class="border-b border-neutral-200 font-medium dark:border-white/10">
                  <tr>
                    <th
                      scope="col"
                      class="border-e border-neutral-200 px-6 py-4 dark:border-white/10">
                      #
                    </th>
                    <th
                      scope="col"
                      class="border-e border-neutral-200 px-6 py-4 dark:border-white/10">
                      First
                    </th>
                    <th
                      scope="col"
                      class="border-e border-neutral-200 px-6 py-4 dark:border-white/10">
                      Last
                    </th>
                    <th scope="col" class="px-6 py-4">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td
                      class="whitespace-nowrap border-e border-neutral-200 px-6 py-4 font-medium dark:border-white/10">
                      1
                    </td>
                    <td
                      class="whitespace-nowrap border-e border-neutral-200 px-6 py-4 dark:border-white/10">
                      Mark
                    </td>
                    <td
                      class="whitespace-nowrap border-e border-neutral-200 px-6 py-4 dark:border-white/10">
                      Otto
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">@mdo</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td
                      class="whitespace-nowrap border-e border-neutral-200 px-6 py-4 font-medium dark:border-white/10">
                      2
                    </td>
                    <td
                      class="whitespace-nowrap border-e border-neutral-200 px-6 py-4 dark:border-white/10">
                      Jacob
                    </td>
                    <td
                      class="whitespace-nowrap border-e border-neutral-200 px-6 py-4 dark:border-white/10">
                      Thornton
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">@fat</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td
                      class="whitespace-nowrap border-e border-neutral-200 px-6 py-4 font-medium dark:border-white/10">
                      3
                    </td>
                    <td
                      colspan="2"
                      class="whitespace-nowrap border-e border-neutral-200 px-6 py-4 dark:border-white/10">
                      Larry the Bird
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Borderless

Borderless table is useful for layouts where lightness is important and we won't be putting much data in its structure.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full text-center text-sm font-light text-surface dark:text-white">
                <thead class="font-medium">
                  <tr>
                    <th scope="col" class="px-6 py-4">#</th>
                    <th scope="col" class="px-6 py-4">First</th>
                    <th scope="col" class="px-6 py-4">Last</th>
                    <th scope="col" class="px-6 py-4">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
                    <td class="whitespace-nowrap px-6 py-4">Mark</td>
                    <td class="whitespace-nowrap px-6 py-4">Otto</td>
                    <td class="whitespace-nowrap px-6 py-4">@mdo</td>
                  </tr>
                  <tr>
                    <td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
                    <td class="whitespace-nowrap px-6 py-4">Jacob</td>
                    <td class="whitespace-nowrap px-6 py-4">Thornton</td>
                    <td class="whitespace-nowrap px-6 py-4">@fat</td>
                  </tr>
                  <tr>
                    <td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
                    <td colspan="2" class="whitespace-nowrap px-6 py-4">
                      Larry the Bird
                    </td>
                    <td class="whitespace-nowrap px-6 py-4">@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Small

Use small table to make tables more compact by cutting cell padding in half.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full text-center text-sm font-light text-surface dark:text-white">
                <thead
                  class="border-b border-neutral-200 font-medium dark:border-white/10">
                  <tr>
                    <th scope="col" class="px-6 py-2">#</th>
                    <th scope="col" class="px-6 py-2">First</th>
                    <th scope="col" class="px-6 py-2">Last</th>
                    <th scope="col" class="px-6 py-2">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-2 font-medium">1</td>
                    <td class="whitespace-nowrap px-6 py-2">Mark</td>
                    <td class="whitespace-nowrap px-6 py-2">Otto</td>
                    <td class="whitespace-nowrap px-6 py-2">@mdo</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-2 font-medium">2</td>
                    <td class="whitespace-nowrap px-6 py-2 ">Jacob</td>
                    <td class="whitespace-nowrap px-6 py-2">Thornton</td>
                    <td class="whitespace-nowrap px-6 py-2">@fat</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-2 font-medium">3</td>
                    <td colspan="2" class="whitespace-nowrap px-6 py-2">
                      Larry the Bird
                    </td>
                    <td class="whitespace-nowrap px-6 py-2">@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Light Head

Use .bg-zinc-50 class to make the head table light.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full text-center text-sm font-light text-surface dark:text-white">
                <thead
                  class="border-b border-neutral-200 bg-neutral-50 font-medium dark:border-white/10 dark:text-neutral-800">
                  <tr>
                    <th scope="col" class=" px-6 py-4">#</th>
                    <th scope="col" class=" px-6 py-4">First</th>
                    <th scope="col" class=" px-6 py-4">Last</th>
                    <th scope="col" class=" px-6 py-4">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap  px-6 py-4 font-medium">1</td>
                    <td class="whitespace-nowrap  px-6 py-4">Mark</td>
                    <td class="whitespace-nowrap  px-6 py-4">Otto</td>
                    <td class="whitespace-nowrap  px-6 py-4">@mdo</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap  px-6 py-4 font-medium">2</td>
                    <td class="whitespace-nowrap  px-6 py-4 ">Jacob</td>
                    <td class="whitespace-nowrap  px-6 py-4">Thornton</td>
                    <td class="whitespace-nowrap  px-6 py-4">@fat</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap  px-6 py-4 font-medium">3</td>
                    <td colspan="2" class="whitespace-nowrap  px-6 py-4">
                      Larry the Bird
                    </td>
                    <td class="whitespace-nowrap  px-6 py-4">@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Dark Head

Use .bg-[#332D2D] class to make the head table dark.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

HTML

        
            
      <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-hidden">
              <table
                class="min-w-full text-center text-sm font-light text-surface dark:text-white">
                <thead
                  class="border-b border-neutral-200 bg-[#332D2D] font-medium text-white dark:border-white/10">
                  <tr>
                    <th scope="col" class=" px-6 py-4">#</th>
                    <th scope="col" class=" px-6 py-4">First</th>
                    <th scope="col" class=" px-6 py-4">Last</th>
                    <th scope="col" class=" px-6 py-4">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap  px-6 py-4 font-medium">1</td>
                    <td class="whitespace-nowrap  px-6 py-4">Mark</td>
                    <td class="whitespace-nowrap  px-6 py-4">Otto</td>
                    <td class="whitespace-nowrap  px-6 py-4">@mdo</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap  px-6 py-4 font-medium">2</td>
                    <td class="whitespace-nowrap  px-6 py-4 ">Jacob</td>
                    <td class="whitespace-nowrap  px-6 py-4">Thornton</td>
                    <td class="whitespace-nowrap  px-6 py-4">@fat</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap  px-6 py-4 font-medium">3</td>
                    <td colspan="2" class="whitespace-nowrap  px-6 py-4">
                      Larry the Bird
                    </td>
                    <td class="whitespace-nowrap  px-6 py-4">@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Always responsive

Responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

HTML

        
            
      <div class="flex flex-col overflow-x-auto">
        <div class="sm:-mx-6 lg:-mx-8">
          <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div class="overflow-x-auto">
              <table
                class="min-w-full text-start text-sm font-light text-surface dark:text-white">
                <thead
                  class="border-b border-neutral-200 font-medium dark:border-white/10">
                  <tr>
                    <th scope="col" class="px-6 py-4">#</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                    <th scope="col" class="px-6 py-4">Heading</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                  <tr class="border-b border-neutral-200 dark:border-white/10">
                    <td class="whitespace-nowrap px-6 py-4 font-medium ">2</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4 ">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4 ">Cell</td>
                  </tr>
                  <tr class="border-b ">
                    <td class="whitespace-nowrap px-6 py-4 font-medium ">3</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                    <td class="whitespace-nowrap px-6 py-4">Cell</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

Tables

Basic example

Variants

Striped

Hoverable

Bordered

Borderless

Small

Light Head

Dark Head

Always responsive

Access restricted

To view this section you must have an active PRO account

Tables

Tailwind CSS Tables

Basic example

Variants

Striped

Hoverable

Bordered

Borderless

Small

Light Head

Dark Head

Always responsive

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):