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