tailwindcss+js实现可拖动的table表格效果代码-html代码-BFW代码库

tailwindcss+js实现可拖动的table表格效果代码

代码语言：html

所属分类：表格

代码描述：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>
         .........完整代码请登录后点击上方下载按钮下载查看