DeveloperBreeze

Document Ready Development Tutorials, Guides & Insights

Unlock 1+ expert-curated document ready tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your document ready skills on DeveloperBreeze.

Automatically add Tailwind CSS and jQuery classes to any table

Note August 03, 2024
javascript css html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Styling with Tailwind CSS</title>
    <!-- Include Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<!-- Example table -->
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
</table>

<!-- jQuery script to apply classes -->
<script>
    $(document).ready(function() {
        $('table').each(function() {
            $(this).addClass('min-w-full bg-white border border-gray-200');
            $(this).find('thead').addClass('bg-gray-50');
            $(this).find('th').addClass('px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200');
            $(this).find('tbody').addClass('bg-white divide-y divide-gray-200');
            $(this).find('tr').addClass('hover:bg-gray-100');
            $(this).find('td').addClass('px-6 py-4 whitespace-nowrap text-sm text-gray-900');
        });
    });
</script>

</body>
</html>

The <link> tag includes Tailwind CSS via CDN, enabling use of utility classes.

Read More