【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>
相关推荐
LJC_Superman4 小时前
Web与Nginx网站服务
运维·服务器·前端·网络·数据库·nginx·vim
星秋Eliot4 小时前
Flutter的三棵树
前端·flutter
正义的大古4 小时前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
lypzcgf4 小时前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
草梅友仁6 小时前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古6 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan7 小时前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥7 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程7 小时前
深入JS(一):手写 Promise
前端·javascript