search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips

    Tables

    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>
    
          
            
        
    logo

    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>
    
          
            
        

    Related resources

    Tutorials:

    colors hover state focus active and others dark mode arbitrary values flexbox text spacing rounded corners lists cards sizing

    Extended Docs:

    colors dividers hover effects list group charts border opacity borders box sizing breakpoints center grid items center text colors columns dark theme overflow overflow hidden paragraph spacing position spacing

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction craft not art content should be the star less is more art of prioritization de emphasize with no mercy size matters label overload lowering contrast beyond borders let it breathe user experience project personality design system principles tips and tricks
    • Basic example
    • Variants
    • Striped
    • Hoverable
    • Bordered
    • Borderless
    • Small
    • Light Head
    • Dark Head
    • Always responsive
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO