Published on

Best Ways To Make A Mobile Responsive Table With Tailwind CSS

Tags
Tables
mobile responsive table

What is Tailwind CSS?

Tailwind CSS is a popular utility-first CSS framework that enables developers to create responsive and customizable web designs with ease. It offers a wide range of pre-designed CSS classes that can be used to style HTML elements and components. Tailwind CSS is highly flexible and can be easily integrated with other front-end frameworks like React, Vue, and Angular.

The description of mobile responsive table UI component

Tables are an essential part of any web application, and they are used to display data in a structured format. However, tables can be challenging to design for mobile devices because of their large size and complexity. A mobile responsive table UI component is a table that is optimized for mobile devices and can be easily viewed and interacted with on smaller screens.

Why use Tailwind CSS to create a mobile responsive table UI component?

Tailwind CSS provides a set of pre-designed CSS classes that can be used to create a mobile responsive table UI component quickly. These classes can be easily customized to match the design requirements of your web application. Tailwind CSS also offers a responsive design system that allows you to create a mobile responsive table UI component that looks great on any device.

The preview of mobile responsive table UI component

To create a mobile responsive table UI component with Tailwind CSS, we can use a combination of CSS classes to style the table and its elements. The table can be made responsive by adding the table-responsive class to the parent div element. This class enables horizontal scrolling on smaller screens and ensures that the table remains readable and usable.

Free download of the mobile responsive table's source code

The source code of mobile responsive table UI component

To create a mobile responsive table UI component with Tailwind CSS, we can use the following HTML and CSS code:

<body class="flex items-center justify-center">
	<div class="container">
		<table class="w-full flex flex-row flex-no-wrap sm:bg-white rounded-lg overflow-hidden sm:shadow-lg my-5">
			<thead class="text-white">
				<tr class="bg-teal-400 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
					<th class="p-3 text-left">Name</th>
					<th class="p-3 text-left">Email</th>
					<th class="p-3 text-left" width="110px">Actions</th>
				</tr>
				<tr class="bg-teal-400 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
					<th class="p-3 text-left">Name</th>
					<th class="p-3 text-left">Email</th>
					<th class="p-3 text-left" width="110px">Actions</th>
				</tr>
                <tr class="bg-teal-400 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
                  <th class="p-3 text-left">Name</th>
                  <th class="p-3 text-left">Email</th>
                  <th class="p-3 text-left" width="110px">Actions</th>
              </tr>
                <tr class="bg-teal-400 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
                  <th class="p-3 text-left">Name</th>
                  <th class="p-3 text-left">Email</th>
                  <th class="p-3 text-left" width="110px">Actions</th>
              </tr>
			</thead>
			<tbody class="flex-1 sm:flex-none">
				<tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
					<td class="border-grey-light border hover:bg-gray-100 p-3">John Covv</td>
					<td class="border-grey-light border hover:bg-gray-100 p-3 truncate">[email protected]</td>
					<td class="border-grey-light border hover:bg-gray-100 p-3 text-red-400 hover:text-red-600 hover:font-medium cursor-pointer">Delete</td>
				</tr>
				<tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
					<td class="border-grey-light border hover:bg-gray-100 p-3">Michael Jackson</td>
					<td class="border-grey-light border hover:bg-gray-100 p-3 truncate">[email protected]</td>
					<td class="border-grey-light border hover:bg-gray-100 p-3 text-red-400 hover:text-red-600 hover:font-medium cursor-pointer">Delete</td>
				</tr>
                <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
                    <td class="border-grey-light border hover:bg-gray-100 p-3">Julia</td>
                    <td class="border-grey-light border hover:bg-gray-100 p-3 truncate">[email protected]</td>
                    <td class="border-grey-light border hover:bg-gray-100 p-3 text-red-400 hover:text-red-600 hover:font-medium cursor-pointer">Delete</td>
                </tr>
                <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
                  <td class="border-grey-light border hover:bg-gray-100 p-3">Martin Madrazo</td>
                  <td class="border-grey-light border hover:bg-gray-100 p-3 truncate">[email protected]</td>
                  <td class="border-grey-light border hover:bg-gray-100 p-3 text-red-400 hover:text-red-600 hover:font-medium cursor-pointer">Delete</td>
                </tr>
			</tbody>
		</table>
	</div>
</body>

<style>
  html,
  body {
    height: 100%;
  }

  @media (min-width: 640px) {
    table {
      display: inline-table !important;
    }

    thead tr:not(:first-child) {
      display: none;
    }
  }

  td:not(:last-child) {
    border-bottom: 0;
  }

  th:not(:last-child) {
    border-bottom: 2px solid rgba(0, 0, 0, .1);
  }
</style>

How to create a mobile responsive table with Tailwind CSS?

To create a mobile responsive table UI component with Tailwind CSS, follow these steps:

  1. Create a div element with the table-responsive class to make the table responsive.
<div class="table-responsive">
  <table>
    <!-- table content goes here -->
  </table>
</div>
  1. Add the table class to the table element to apply basic table styling.
<div class="table-responsive">
  <table class="table">
    <!-- table content goes here -->
  </table>
</div>
  1. Add the table-auto class to the table element to enable automatic column sizing.
<div class="table-responsive">
  <table class="table table-auto">
    <!-- table content goes here -->
  </table>
</div>
  1. Add the border class to the table element to add borders to the table cells.
<div class="table-responsive">
  <table class="table table-auto border">
    <!-- table content goes here -->
  </table>
</div>
  1. Add the text-left, text-center, or text-right class to the th and td elements to align the text.
<div class="table-responsive">
  <table class="table table-auto border">
    <thead>
      <tr>
        <th class="text-left">Column 1</th>
        <th class="text-center">Column 2</th>
        <th class="text-right">Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-left">Row 1, Column 1</td>
        <td class="text-center">Row 1, Column 2</td>
        <td class="text-right">Row 1, Column 3</td>
      </tr>
      <tr>
        <td class="text-left">Row 2, Column 1</td>
        <td class="text-center">Row 2, Column 2</td>
        <td class="text-right">Row 2, Column 3</td>
      </tr>
    </tbody>
  </table>
</div>
  1. Add the bg-gray-100 class to the tr element to add alternating row colors.
<div class="table-responsive">
  <table class="table table-auto border">
    <thead>
      <tr>
        <th class="text-left">Column 1</th>
        <th class="text-center">Column 2</th>
        <th class="text-right">Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-gray-100">
        <td class="text-left">Row 1, Column 1</td>
        <td class="text-center">Row 1, Column 2</td>
        <td class="text-right">Row 1, Column 3</td>
      </tr>
      <tr>
        <td class="text-left">Row 2, Column 1</td>
        <td class="text-center">Row 2, Column 2</td>
        <td class="text-right">Row 2, Column 3</td>
      </tr>
      <tr class="bg-gray-100">
        <td class="text-left">Row 3, Column 1</td>
        <td class="text-center">Row 3, Column 2</td>
        <td class="text-right">Row 3, Column 3</td>
      </tr>
    </tbody>
  </table>
</div>
  1. Add the hover:bg-gray-200 class to the tr element to add hover effects.
<div class="table-responsive">
  <table class="table table-auto border">
    <thead>
      <tr>
        <th class="text-left">Column 1</th>
        <th class="text-center">Column 2</th>
        <th class="text-right">Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-gray-100 hover:bg-gray-200">
        <td class="text-left">Row 1, Column 1</td>
        <td class="text-center">Row 1, Column 2</td>
        <td class="text-right">Row 1, Column 3</td>
      </tr>
      <tr>
        <td class="text-left">Row 2, Column 1</td>
        <td class="text-center">Row 2, Column 2</td>
        <td class="text-right">Row 2, Column 3</td>
      </tr>
      <tr class="bg-gray-100 hover:bg-gray-200">
        <td class="text-left">Row 3, Column 1</td>
        <td class="text-center">Row 3, Column 2</td>
        <td class="text-right">Row 3, Column 3</td>
      </tr>
    </tbody>
  </table>
</div>

Conclusion

In conclusion, creating a mobile responsive table UI component with Tailwind CSS is a straightforward process that can be accomplished with just a few CSS classes. Tailwind CSS provides a wide range of pre-designed CSS classes that can be used to style HTML elements and components. By following the steps outlined in this article, you can create a mobile responsive table UI component that looks great on any device.