【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>
相关推荐
Asort几秒前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee9 分钟前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安9 分钟前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
用户34216749055213 分钟前
Java高手速成--吃透源码+手写组件+定制开发教程
前端·深度学习
却尘15 分钟前
当你敲下 `pnpm run dev`,这台机器到底在背后干了什么?
前端·javascript·面试
歪歪10015 分钟前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
却尘18 分钟前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
北辰alk24 分钟前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端
葡萄城技术团队34 分钟前
SpreadJS ReportSheet 与 DataManager 实现 Token 鉴权:全流程详解与代码解析
前端
勤劳打代码34 分钟前
触类旁通 —— Flutter 与 React 对比解析
前端·flutter·react native