自定义table

qq_419854052025-08-21 16:34

更好

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>数据表格</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-size: 14px;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    /* 表格容器 */
    .table-container {
      width: 100%;
      height: 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
    }

    /* 表格包装，实现水平滚动 */
    .table-wrapper {
      flex: 1;
      overflow-x: auto;
      position: relative;
      border: 1px solid #ebeef5;
      border-radius: 4px;
    }

    /* 表格主体样式 */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 800px;
    }

    /* 表头固定样式 */
    .data-table thead {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    /* 表头和单元格通用样式 */
    .data-table th,
    .data-table td {
      padding: 8px 12px;
      line-height: 24px;
      text-align: left;
      border-bottom: 1px solid #ebeef5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background-color: #fff;
    }

    /* 表头特定样式 */
    .data-table th {
      font-weight: 600;
      color: #606266;
      background-color: #f5f7fa;
    }

    /* 单元格特定样式 */
    .data-table td {
      color: #606266;
    }

    /* 特殊列宽设置 */
    .dict-col {
      width: 16%;
    }

    .action-col {
      width: 15%;
      min-width: 150px;
    }

    /* 按钮样式 */
    .data-table button {
      margin-right: 8px;
      padding: 6px 12px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      background-color: #fff;
      color: #606266;
      cursor: pointer;
      transition: all 0.3s;
    }

    .data-table button:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }

    /* 滚动条样式 */
    .table-wrapper::-webkit-scrollbar {
      height: 8px;
      width: 8px;
    }

    .table-wrapper::-webkit-scrollbar-thumb {
      background-color: #c1c1c1;
      border-radius: 4px;
    }

    .table-wrapper::-webkit-scrollbar-track {
      background-color: #f1f1f1;
    }
  </style>
</head>

<body>
  <div class="table-container">
    <div class="table-wrapper">
      <table class="data-table" role="grid" aria-label="字段配置表">
        <thead>
          <tr>
            <th scope="col">字段名称</th>
            <th scope="col">字段类型</th>
            <th scope="col">是否查询展示</th>
            <th scope="col">是否列表展示</th>
            <th scope="col">是否表单展示</th>
            <th scope="col">是否必填</th>
            <th scope="col" class="dict-col">关联字典</th>
            <th scope="col" class="action-col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>用户名</td>
            <td>字符串</td>
            <td>是</td>
            <td>是</td>
            <td>是</td>
            <td>是</td>
            <td class="dict-col">无</td>
            <td class="action-col">
              <button type="button" aria-label="编辑">编辑</button>
              <button type="button" aria-label="删除">删除</button>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>密码</td>
            <td>否</td>
            <td>否</td>
            <td>是</td>
            <td>是</td>
            <td class="dict-col">无</td>
            <td class="action-col">
              <button type="button" aria-label="编辑">编辑</button>
              <button type="button" aria-label="删除">删除</button>
            </td>
          </tr>
          <tr>
            <td>性别</td>
            <td>枚举</td>
            <td>是</td>
            <td>是</td>
            <td>是</td>
            <td>否</td>
            <td class="dict-col">性别字典</td>
            <td class="action-col">
              <button type="button" aria-label="编辑">编辑</button>
              <button type="button" aria-label="删除">删除</button>
            </td>
          </tr>
          <tr>
            <td>年龄</td>
            <td>数字</td>
            <td>是</td>
            <td>是</td>
            <td>是</td>
            <td>否</td>
            <td class="dict-col">无</td>
            <td class="action-col">
              <button type="button" aria-label="编辑">编辑</button>
              <button type="button" aria-label="删除">删除</button>
            </td>
          </tr>
          <tr>
            <td>邮箱</td>
            <td>字符串</td>
            <td>是</td>
            <td>是</td>
            <td>是</td>
            <td>否</td>
            <td class="dict-col">无</td>
            <td class="action-col">
              <button type="button" aria-label="编辑">编辑</button>
              <button type="button" aria-label="删除">删除</button>
            </td>
          </tr>
          <tr>
            <td>手机号</td>
            <td>字符串</td>
            <td>是</td>
            <td>是</td>
            <td>是</td>
            <td>否</td>
            <td class="dict-col">无</td>
            <td class="action-col">
              <button type="button" aria-label="编辑">编辑</button>
              <button type="button" aria-label="删除">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

没有上面的好

html 复制代码 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div class="table-wrap scrollbar">
    <div class="table">
      <div class="table-header">
        <span class="col">字段名称</span>
        <span class="col">字段类型</span>
        <span class="col">是否查询展示</span>
        <span class="col">是否列表展示</span>
        <span class="col">是否表单展示</span>
        <span class="col">是否必填</span>
        <span class="col col-7">关联字典</span>
        <span class="col col-8">操作</span>
      </div>
      <div class="table-body scrollbar">
        <div class="row">
          <span class="col">1</span>
          <span class="col">2</span>
          <span class="col">3</span>
          <span class="col">4</span>
          <span class="col">5</span>
          <span class="col">6</span>
          <span class="col col-7">7</span>
          <span class="col col-8">
            <button>编辑</button>
            <button>删除</button>
          </span>
        </div>
        <div class="row">
          <span class="col">1</span>
          <span class="col">2</span>
          <span class="col">3</span>
          <span class="col">4</span>
          <span class="col">5</span>
          <span class="col">6</span>
          <span class="col col-7">7</span>
          <span class="col col-8">
            <button>编辑</button>
            <button>删除</button>
          </span>
        </div>
        <div class="row">
          <span class="col">1</span>
          <span class="col">2</span>
          <span class="col">3</span>
          <span class="col">4</span>
          <span class="col">5</span>
          <span class="col">6</span>
          <span class="col col-7">7</span>
          <span class="col col-8">
            <button>编辑</button>
            <button>删除</button>
          </span>
        </div>
        <div class="row">
          <span class="col">1</span>
          <span class="col">2</span>
          <span class="col">3</span>
          <span class="col">4</span>
          <span class="col">5</span>
          <span class="col">6</span>
          <span class="col col-7">7</span>
          <span class="col col-8">
            <button>编辑</button>
            <button>删除</button>
          </span>
        </div>
        <div class="row">
          <span class="col">1</span>
          <span class="col">2</span>
          <span class="col">3</span>
          <span class="col">4</span>
          <span class="col">5</span>
          <span class="col">6</span>
          <span class="col col-7">7</span>
          <span class="col col-8">
            <button>编辑</button>
            <button>删除</button>
          </span>
        </div>
        <div class="row">
          <span class="col">1</span>
          <span class="col">2</span>
          <span class="col">3</span>
          <span class="col">4</span>
          <span class="col">5</span>
          <span class="col">6</span>
          <span class="col col-7">7</span>
          <span class="col col-8">
            <button>编辑</button>
            <button>删除</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    height: 100%;
  }

  .table-wrap {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    padding: 20px;
  }

  .table {
    width: max-content;
    min-width: 100%;
    height: 100%;
  }

  .table-header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: rgb(144, 147, 153);
  }

  .table-body {
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    color: rgb(96, 98, 102);
  }

  .row {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .col {
    flex-shrink: 0;
    width: 12%;
    min-width: 125px;
    height: 100%;
    padding: 8px 12px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #ebeef5;
  }

  .col-7 {
    width: 16%;
  }
</style>

`
数据表格（完美两行截断方案）

字段名称 字段类型 是否查询展示 是否列表展示 是否表单展示 是否必填 关联字典 操作
用户名（用于系统登录的唯一标识，建议使用字母数字组合，长度限制为6-20个字符） 字符串类型（String），前端需要做格式验证，支持大小写字母和数字 是（在高级查询中作为可筛选条件） 是（在列表页默认显示该列） 是（在新增/编辑表单中必填） 是（系统必填字段，需要红色星号标注） 无关联字典数据 编辑 删除
密码（采用SHA-256加密存储，必须包含大小写字母和数字） 密码类型（Password），前端需要做强度校验 否（安全考虑不显示任何密码信息） 否（列表页永远不显示密码字段） 是（表单中显示带眼睛图标的密码框） 是（必须设置符合强度要求的密码） 无 编辑 删除
用户状态（标识账号是否可用，包括启用/禁用/锁定等状态） 枚举类型（Enum），值：ENABLED(1)/DISABLED(0)/LOCKED(2) 是（作为常用筛选条件） 是（显示为不同颜色的状态标签） 是（管理员可修改用户状态） 是（默认值：ENABLED） 系统字典：user_status 编辑 删除

`

热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03KGG转MP3工具|非KGM文件|解密音频04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）07Spring 调试终于不再痛苦了082025最新国内服务器可用docker源仓库地址大全（2025年8月更新）09Claude Code VSCode集成开发指南：AI编程助手完整配置10【大模型实战篇】部署GPT-OSS-120B踩得坑（vllm / ollama等推理框架）