Tailwind CSS Classes

Tailwind CSS class .table-column

<div class="bg-gray-400 p-2 table">
  <div class="table-caption">Description</div>
  <div class="table-header-group">
    <div class="table-cell bg-teal-400">One Header</div>
    <div class="table-cell bg-teal-400">Two Header</div>
  </div>
  <div class="table-column-group">
    <div class="table-colum bg-teal-400">One Column</div>
    <div class="table-colum bg-teal-400">Two Column</div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell bg-teal-400">One Data</div>
      <div class="table-cell bg-teal-400">Two Data</div>
    </div>
    <div class="table-row">
      <div class="table-cell bg-teal-400">One Data</div>
      <div class="table-cell bg-teal-400">Two Data</div>
    </div>
  </div>
  <div class="table-footer-group">
    <div class="table-cell bg-teal-400">One Footer</div>
    <div class="table-cell bg-teal-400">One Footer</div>
  </div>
</div>

Preview

Are you tired of writing HTML by hand?

CSS source

.table-column {
    display: table-column;
}

More Tailwind CSS classes in Table category

© 2024 Shuffle. All rights reserved.