Frontend Design Development Tutorials, Guides & Insights
Unlock 4+ expert-curated frontend design tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your frontend design skills on DeveloperBreeze.
Adblocker Detected
It looks like you're using an adblocker. Our website relies on ads to keep running. Please consider disabling your adblocker to support us and access the content.
Note
javascript css +1
Automatically add Tailwind CSS and jQuery classes to any table
To automatically add Tailwind CSS and jQuery classes to any table on a page, use the following approach.
<!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>Aug 03, 2024
Read More