Tailwind CSS Classes

Tailwind CSS class .table-auto / .table-fixed

<table class="table-auto">
  <thead>
    <tr>
      <th class="px-4 py-2">Header 1</th>
      <th class="px-4 py-2">Header 2</th>
      <th class="px-4 py-2">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Lorem ipsum dolor sit amet</td>
      <td class="border px-4 py-2">Lorem</td>
      <td class="border px-4 py-2">Lorem</td>
    </tr>
    <tr class="bg-gray-100">
      <td class="border px-4 py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi eget augue consequat dolor posuere dignissim.
        Duis libero purus, sodales eget erat in, condimentum placerat orci.</td>
      <td class="border px-4 py-2">Lorem</td>
      <td class="border px-4 py-2">Lorem</td>
    </tr>
  </tbody>
</table>

<table class="table-fixed">
  <thead>
    <tr>
      <th class="w-1/2 px-4 py-2">Header 1</th>
      <th class="w-1/4 px-4 py-2">Header 2</th>
      <th class="w-1/4 px-4 py-2">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Lorem ipsum dolor sit amet</td>
      <td class="border px-4 py-2">Lorem</td>
      <td class="border px-4 py-2">Lorem</td>
    </tr>
    <tr class="bg-gray-100">
      <td class="border px-4 py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi eget augue consequat dolor posuere dignissim.
        Duis libero purus, sodales eget erat in, condimentum placerat orci.</td>
      <td class="border px-4 py-2">Lorem</td>
      <td class="border px-4 py-2">Lorem</td>
    </tr>
  </tbody>
</table>

Preview

Are you tired of writing HTML by hand?

CSS source

.table-auto { table-layout: auto; }
.table-fixed { table-layout: fixed; }

More Tailwind CSS classes in Table category

© 2024 Shuffle. All rights reserved.