手机端自适应表格table样式如何写

最新推荐文章于 2025-09-25 01:15:11 发布

转载最新推荐文章于 2025-09-25 01:15:11 发布 · 4.3k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：http://www.zgzy.net.cn/article/wenda_24034.html

文章标签：

#手机端表格css #移动端table样式

div+css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何解决移动端表格展示混乱的问题。通过设置`table-layout: fixed`，`width: 100%`，`white-space: nowrap`等CSS属性，可以实现表格在移动端的自适应和美观展示。关键代码包括设置单元格的宽度、文字换行方式、边框和对齐方式，确保在不同设备上表格内容清晰、排列整齐。

部署运行你感兴趣的模型镜像

有时候我们的网页需要展示一些表格的内容，在pc端是很好控制它的展现方式的，但是到移动端就非常难控制了，那么该怎么做呢？

比如上图就是没控制好的移动端的表格table样式，展示非常的凌乱。

这个就是写好的移动端的表格table样式，展现就非常的美观。

具体的移动端实现代码

table {
            table-layout: fixed !important;
            width: 100% !important;
            border-collapse:collapse;
            border:none;
            font-size:0.23rem;
        }
 
td,th {
            width:1px;
            white-space:nowrap; /* 自适应宽度*/
            word-break:keep-all; /* 避免长单词截断，保持全部 */
            border:solid #676767 1px;
            text-align:center;
            white-space:pre-line;
            word-break:break-all !important;
            word-wrap:break-word !important;
            display:table-cell;
            vertical-align:middle !important;
            white-space: normal !important;
            height:auto;
            vertical-align:text-top;
            padding:2px 2px 0 2px;
            display: table-cell;
        }

您可能感兴趣的与本文相关的镜像