当前位置：首页 > news >正文

自定义table

news 2025/8/21 7:56:33

更好
在这里插入图片描述

<!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>

没有上面的好

<!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>