【Tailwind, Daisyui】响应式表格 responsive table

表格,本身很麻烦。做响应式表格更麻烦。

目前我采用下面这个方法,我认为是最佳实践:

1、小屏幕可以水平滚动表格:

把表格放到这样的div里就可以了:

html 复制代码
<div class="overflow-x-auto w-full">

2、小屏幕隐藏不重要的栏位:

html 复制代码
<thead>
      <tr>
        <th>Name</th>
        <th class="hidden md:table-cell">Favorite Color</th>
      </tr>
</thead>
<tbody>
    <tr>
        <td>Hart Hagerty</td>
        <td class="hidden md:table-cell">Purple</td>
    </tr>
</tbody>
相关推荐
小番茄夫斯基2 分钟前
如果我一个前端页面要被用户看到,原理是什么,用户怎么通过网址就看到页面的,这背后要怎么弄
前端
迅猛龙办公室5 分钟前
Python实现获取星期字符串
java·前端·python
小小荧8 分钟前
🚀 Node.js 之父离开 Deno,带着整个团队加入了 Cloudflare
前端·node.js
IllegalCreed8 分钟前
人中吕布,卡中 Blackwell:我用三国志14的数值给 687 个大模型排了座位
前端
troy1289 分钟前
Java Web 常见面试题(2026 最新整理)
java·前端·hive
Data analyse45615 分钟前
数据埋点设计的事件命名规则校验
服务器·前端·数据分析
溪语流沙31 分钟前
【Web全栈进阶】OAuth实战——GitHub第三方登录
前端·python·github
小陈运维31 分钟前
微WEB文件服务 Docker 部署指南
前端·docker·容器
lichenyang45332 分钟前
从 Prettier 开始整理前端开发常用命令
前端