Modern CSS with Tailwind, 2nd Edition

Tables

The classic way of spacing HTML pages is the table. Unless you’re actually displaying tabular data, a CSS grid is now preferable for layout purposes, so Tailwind doesn’t provide many specific table utilities.

Tailwind lets you use table-auto to keep the default browser behavior of auto-spacing the columns of a table based on its content. If you want to explicitly specify column widths, you can use table-fixed on the <table> element and then put an explicit width helper on each column of the table—the fractional helpers are useful for this:

html/page.html

<table class="table-fixed border border-collapse">
  <tr>
    <th class="border border-black w-1/6">Small</th>
    <th class="border border-black w-2/6">Medium</th>
    <th class="border ...