怎样制作一个可以折叠的表格？

1、先看一下折叠表格的的效果

https://chinatechlog.com/wp-content/uploads/2024/08/folded-sheet.mp4

2、怎样实现这样的效果？

2.1 生成一个普通的表格

要具备的条件

  • 1

    Woodpress 后台

  • 2

    网站主题， 我用的是Avada

  • 3

    使用elements为table

普通表效果点击链接

2.2 表格优化，加外框，表头加粗

当我们有了一个普通表之后，我们就有表格的Html代码，如右图

通过这个代码，我们可以对表格进行调整，如表格加框线，表头加粗等

生成如下图的效果，在这里就不详细讲解表格优化的思路

2.3 生成一个可伸缩的表格

当我们有了一个优化后的表格之后，我们现在要做的是做成可伸缩的表格，这里用到的条件如下

  • 1

    代码生成用ChatGPT或智谱清言

  • 2

    Woodpress 后台

  • 3

    网站主题， 我用的是Avada

  • 4

    使用elements为code block

智谱清言生成的代码如下：(与chatGPT所生成的代码不同，但效果是一样的）

3、小结

  • 1

    在AI的协助下，网站可以实现很多之前不可想像的功能

  • 2

    懂点Html知识，只要认识基本的Html名称即可

  • 3

    国内的AI现在不比国外的差

  • 4

    网站设计，在于边学，边练，边用，不断提升