解决后台调取的内容中有表格，但手机端表格字段过长溢出问题

最新推荐文章于 2024-09-30 23:36:44 发布

爱研究计算机的小陈

最新推荐文章于 2024-09-30 23:36:44 发布

阅读量117

点赞数

分类专栏：前端html+css+js 文章标签： html5 javascript jquery css3

本文链接：https://blog.csdn.net/pursuedream6/article/details/133162135

版权

前端html+css+js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决后台调取的内容中有表格，但手机端表格字段过长溢出问题</title>


    <style>
        .table-box {
            width: 100%;
            overflow-x: auto;
        }
    </style>
</head>

<body>
    <!-- 后台调用的内容开始 -->
    <div class="content">
        <p>
            爱国主义是指个人或集体对祖国的一种积极和支持的态度，揭示了个人对祖国的依存关系，是人们对自己家园以及民族和文化的归属感、认同感、尊严感与荣誉感的统一。集中表现为民族自尊心和民族自信心，为保卫祖国和争取祖国的独立富强而献身的奋斗精神。不仅体现在政治、法律、道德、艺术、宗教等各种意识形态和整个上层建筑之中，而且渗透到社会生活各个方面，成为影响民族和国家命运的重要因素。
        </p>

        <table border="1" cellspacing="0">
            <tr>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
            </tr>

        </table>

        <p>
            爱国主义是指个人或集体对祖国的一种积极和支持的态度，揭示了个人对祖国的依存关系，是人们对自己家园以及民族和文化的归属感、认同感、尊严感与荣誉感的统一。集中表现为民族自尊心和民族自信心，为保卫祖国和争取祖国的独立富强而献身的奋斗精神。不仅体现在政治、法律、道德、艺术、宗教等各种意识形态和整个上层建筑之中，而且渗透到社会生活各个方面，成为影响民族和国家命运的重要因素。
        </p>
        <table border="1" cellspacing="0">
            <tr>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
                <td>1111111</td>
            </tr>

        </table>
    </div>
    <!-- 后台调用的内容结束-->
</body>
  <!-- 先引入jquery文件 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">    </script>
<script>
    //    获取表格数据
    $(".content  table").map((i, el) => {
        // 准备包住表格的盒子，并把这个盒子插入到对应的表格前
        $(`<div class="table-box table-box-${i}"></div>`).insertBefore($(el));
        //    移动表格到对应盒子里
        $(`.table-box-${i}`).html($(el));
    })
</script>


</html>