Tailwind CSS Comparison Tables & Size Guides Blocks

All Blocks
Ecommerce
Comparison Tables & Size Guides

Comparison Tables & Size Guides

Comparison tables and size guides for evaluating product options, checking fit, and supporting purchase decisions.

Product Comparison Table with Add Product Slot Pro

Multi-column comparison table aligns product cards, grouped spec rows, stock states, and an empty add-product slot in a scrollable table shell.

<div class="bg-layer border border-layer-line rounded-2xl overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                      <div class="min-w-full inline-block align-middle">
                        
                        <table class="min-w-full divide-y divide-table-line">
                          <thead>
                            <tr class="divide-x divide-table-line">
                              <th scope="col" class="w-1/4 min-w-56 align-top"></th>

<th scope="col" class="w-1/4 min-w-56 align-top">
                                <div class="p-1 relative">
                                  <a class="p-3 block text-start rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/ecommerce/storefront/product-detail.html">
                                    <img class="size-full rounded-lg" src="https://images.unsplash.com/photo-1708443683202-a5be0ced5b8b?q=80&w=560&h=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                
                                    <span class="block mt-2 font-normal text-sm md:text-base text-foreground">
                                      Slim Lyocell Trousers
                                    </span>

<div class="mt-3 flex items-center gap-x-0.5">
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <span class="ms-1 text-xs font-normal text-foreground">
                                        (234)
                                      </span>
                                    </div>
                                    
                                  </a>

<div class="absolute top-0 inset-e-0 z-10 pt-6 pe-6">
                                    <button type="button" class="size-7 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer border border-transparent text-layer-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                      <span class="sr-only">Remove</span>
                                    </button>
                                  </div>
                                  
                                </div>
                              </th>

<span class="block mt-2 font-normal text-sm md:text-base text-foreground">
                                      Micro Houndstooth Suit Trousers
                                    </span>

<div class="mt-3 flex items-center gap-x-0.5">
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                      <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
                                      </svg>
                                      <span class="ms-1 text-xs font-normal text-foreground">
                                        (675)
                                      </span>
                                    </div>
                                    
                                  </a>

<tbody class="divide-y divide-table-line">
                            <tr class="bg-surface divide-x divide-table-line">
                              <td>
                                <div class="px-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-foreground">
                                  Availability
                                </div>
                              </td>

<td></td>
                              <td></td>
                              <td></td>
                            </tr>
      
                            <tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Sportswear Garment
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="inline-flex justify-center items-center gap-x-1.5 text-sm text-orange-500">
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                  Low in stock
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="inline-flex justify-center items-center gap-x-1.5 text-sm text-teal-500">
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  In stock
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Size (US)
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  12, 14, 4, 6, 8, 10
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  12, 14, 4, 6, 8, 10
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>
      
                            <tr class="bg-surface divide-x divide-table-line">
                              <td>
                                <div class="px-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-foreground">
                                  Product properties
                                </div>
                              </td>

<td></td>
                              <td></td>
                              <td></td>
                            </tr>
      
                            <tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Target Group  
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Men
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Men
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Sportswear Garment
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="inline-flex justify-center items-center gap-x-1.5 text-sm text-red-500">
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                  No
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="inline-flex justify-center items-center gap-x-1.5 text-sm text-teal-500">
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                  Yes
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Manufacturer Colour
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  -
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  -
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Colour
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Brown
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Brown
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Pattern
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Solid Colour
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Solid Colour
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Fit
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Regular
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Regular
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Length
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Long
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Long
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Details
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Slit
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Slit
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>

<tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Washing Instructions
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Handwash, Do Not Bleach, Do Not Dryclean, Iron, Do Not Tumble Dry
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  30ºC, Do Not Tumble Dry
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>
      
                            <tr class="bg-surface divide-x divide-table-line">
                              <td>
                                <div class="px-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-foreground">
                                  Type
                                </div>
                              </td>

<td></td>
                              <td></td>
                              <td></td>
                            </tr>
      
                            <tr class="divide-x divide-table-line">
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Sweaters & Jackets
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Sweater
                                </span>
                              </td>
                              <td class="size-px px-4 py-3">
                                <span class="text-sm text-muted-foreground-2">
                                  Jacket
                                </span>
                              </td>
                              <td class="size-px px-4 py-3 animate-pulse">
                                <div class="w-1/2 h-4 bg-surface-1 rounded-full"></div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        
                      </div>
                    </div>

Size Guide Measurement Table Pro

Compact size guide table maps body measurements across standard apparel sizes in a horizontally scrollable table.

<div class="border border-layer-line rounded-lg overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                      <div class="min-w-full inline-block align-middle">
                        
                        <table class="min-w-full divide-y divide-table-line">
                          <thead>
                            <tr>
                              <th scope="col" class="odd:bg-layer even:bg-surface">
                                <div class="px-4 py-3 text-start flex items-center gap-x-1 text-xs font-medium text-foreground">
                                  Size
                                </div>
                              </th>

<tbody class="divide-y divide-table-line">
                            <tr>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs font-medium text-foreground">
                                  Chest
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  28.1 - 31.5
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  31.5 - 35
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  35 - 37.5
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  37.5 - 41
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  41 - 44
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  44 - 48.5
                                </span>
                              </td>
                            </tr>

<tr>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs font-medium text-foreground">
                                  Waist
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  22.5 - 25.5
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  25.5 - 29
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  29 - 32
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  32 - 35
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  35 - 38
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  38 - 43
                                </span>
                              </td>
                            </tr>

<tr>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs font-medium text-foreground">
                                  Height
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  < 5'7"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                              <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                                <span class="text-xs text-muted-foreground-2">
                                  5'7" - 6'0"
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        
                      </div>
                    </div>