Tailwind CSS Table Layout

23 Mar, 2022
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can set the display of the layout of the table. In CSS, we do that by using the CSS table-layout property.
Table Layout classes:
table-auto
table-fixed
table-auto: This class is used to allow the table to automatically size columns to fit the contents of the cell.
Syntax:
<element class="table-auto">...</element>
Example:
HTML
<!DOCTYPE html> <html><head>     <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">         GeeksforGeeks     </h1>     <b>Tailwind CSS Table Layout Class</b>     <div class="bg-green-200">         <table class="table-auto border-separate border border-green-900">        <thead>          <tr>            <th class="border border-green-600">Frameworks</th>            <th class="border border-green-600">About</th>          </tr>        </thead>        <tbody>          <tr>            <td class="border border-green-600">Tailwind CSS</td>            <td class="border border-green-600">                Tailwind CSS is a highly customizable,                 low-level CSS framework that gives you all                 of the building blocks            </td>          </tr>          <tr>            <td class="border border-green-600">Bulma</td>            <td class="border border-green-600">                Bulma CSS by @jgthms is just perfect.                 Simple, easily customizable and doesn't                 impose Javascript implementations.            </td>          </tr>          <tr>            <td class="border border-green-600">Bootstrap</td>            <td class="border border-green-600">                Bootstrap is a free and open-source CSS                 framework directed at responsive, mobile-first                front-end web development.            </td>          </tr>        </tbody>        </table>    </div> </body>   </html> 
Output:
Tailwind CSS table layout
table-fixed: This class is used to allow the table to ignore the content and use fixed widths for columns. The width of the first row will set the column widths for the whole table.
Syntax:
<element class="table-fixed">...</element>
Example:
HTML
<!DOCTYPE html> <html><head>     <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">         GeeksforGeeks     </h1>     <b>Tailwind CSS Table Layout Class</b>     <div class="bg-green-200">         <table class="table-fixed border-separate border border-green-900">        <thead>          <tr>            <th class="border border-green-600 w-1/4">Frameworks</th>            <th class="border border-green-600 w-3/4">About</th>          </tr>        </thead>        <tbody>          <tr>            <td class="border border-green-600">Tailwind CSS</td>            <td class="border border-green-600">                Tailwind CSS is a highly customizable,                 low-level CSS framework that gives you all                 of the building blocks            </td>          </tr>          <tr>            <td class="border border-green-600">Bulma</td>            <td class="border border-green-600">                Bulma CSS by @jgthms is just perfect.                 Simple, easily customizable and doesn't                 impose Javascript implementations.            </td>          </tr>          <tr>            <td class="border border-green-600">Bootstrap</td>            <td class="border border-green-600">                Bootstrap is a free and open-source CSS                 framework directed at responsive, mobile-first                front-end web development.            </td>          </tr>        </tbody>        </table>    </div> </body>   </html> 
Output:
Tailwind CSS layout
Tailwind CSS
Tailwind-Tables
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?