tailwindcss+js实现可拖动的table表格效果代码
代码语言:html
所属分类:表格
代码描述:tailwindcss+js实现可拖动的table表格效果代码
代码标签: tailwindcss js 拖动 table 表格
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: 'Inter', sans-serif; height: 100vh; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border: 1px solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } tr { cursor: pointer; } th { resize: horizontal; /* Makes the cell resizable */ } th::-webkit-resizer { background-color: transparent; padding: 20px; } thead tr { cursor: auto; /* Disable dragging on the header row */ } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.0.0.js"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> </head> <body> <!-- Container --> <div class="container mx-auto p-4 h-full"> <div class="flex justify-center items-center h-full"> <!-- Table --> <table class="w-full max-w-[750px]" id="my-table"> <thead> <!-- Resizable area --> <tr class="text-sm font-semibold"> <th>Name</th> <th>Position</th> <th>Office</th> <th>Salary</th> </tr> </thead> <tbody> <tr class="text-sm transition-all hover:bg-gray-100"> <td>John Doe</td> <td>Marketing Manager</td> <td>New York City</td> <td>$80,000</td> </tr> <tr class="text-sm transition-all hover:bg-gray-100"> <td>Jane Smith</td> <td>Sales Associate</td> <td>Los Angeles</td> <td>$50,000</td> </tr> <tr class="text-sm transition-all hover:bg-gray-100"> <td>Michael Johnson</td> <td>Accountant</td> <td>Chicago</td> <td>$70,000</td> </tr> <tr class="text-sm transition-all hover:bg-gray-100"> <td>Sarah Williams</td> <td>Human Resources Manager</td> <td>Houston</td> <td>$90,000</td> </tr> <tr class="text-sm transition-all hover:bg-gray-100"> <td>David Lee</td> <td>IT Specialist</td> <td>San Francisco</td> <td>$60,000</td> </tr> <tr class="text-sm transition-all hover:bg-gray-100"> <td>Lisa Brown</td> <td>Operations Manager</td> <td>Miami</td> <td>$85,000</td> </tr> <tr class="text-sm transition-all hover:bg-gray-100"> <td>Kevin Davis</td> <td>Customer Service Representative</td> <td>Dallas</td> <td>$45,000</td> </tr> <tr class="text-sm transition-all hover:bg-gray-100"> <td>Laura Taylor</td> <td>Project Manager</td> <td>Seattle</td> <td>$75,000</td> </tr> <tr class="text-sm transition-all hover:bg-gray-100"> <td>Mark Wilson</td> <td>Business Analyst</td> <td>Atlanta</td.........完整代码请登录后点击上方下载按钮下载查看
网友评论0