【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>
相关推荐
光影少年3 小时前
rn如何和原生进行通信,是单线程还是多线程,通信方式都有哪些
前端·react native·react.js·taro
好大哥呀3 小时前
Java Web的学习路径
java·前端·学习
HashTang3 小时前
【AI 编程实战】第 7 篇:登录流程设计 - 多场景、多步骤的优雅实现
前端·uni-app·ai编程
cos4 小时前
Fork 主题如何更新?基于 Ink 构建主题更新 CLI 工具
前端·javascript·git
小满zs4 小时前
Next.js第二十一章(环境变量)
前端·next.js
C***11504 小时前
Spring aop 五种通知类型
java·前端·spring
朝阳395 小时前
前端项目的【package-lock.json】详解
前端
摸鱼的春哥5 小时前
AI编排实战:用 n8n + DeepSeek + Groq 打造全自动视频洗稿流水线
前端·javascript·后端
nece0016 小时前
vue3杂记
前端·vue