【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>
相关推荐
阳光是sunny13 分钟前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
小林ixn1 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker1 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜2 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康2 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端
一点一木3 小时前
从60首歌到1个网站:输入你的故事,还你一首歌
前端·github
IT_陈寒4 小时前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端
kyriewen4 小时前
我让AI改一个bug——它偷偷动了5个我没让它碰的地方
前端·javascript·ai编程
遇乐的果园4 小时前
前端学习笔记-vue加载渲染优化
前端·笔记·学习
用户985033593285 小时前
OpenLayers 热力图从原理到 Vue 组件一键接入
前端