扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何搭建CSSdisplay属性的table表格布局
  • 439

0
分享到

如何搭建CSSdisplay属性的table表格布局

2024-04-02 19:04:59 439人浏览 八月长安
摘要

如何搭建CSSdisplay属性的table表格布局，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。项目改造中遇到DIV+CSS实现的table

如何搭建CSSdisplay属性的table表格布局，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用<table> html标签即可

一、CSS display属性的表格布局相关属性的解释：

table    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
table-row-group    此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group    此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group    此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row    此元素会作为一个表格行显示（类似 <tr>）。
table-column-group    此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column    此元素会作为一个单元格列显示（类似 <col>）
table-cell    此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption    此元素会作为一个表格标题显示（类似 <caption>）

二、示例代码

1、普通表格

XML/HTML Code复制内容到剪贴板


  2. <!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>display普通表格</title>  
<style type="text/css">  
.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}   
.table {display: table; width: 80%; border-collapse: collapse;}   
.table-tr {display: table-row; height: 30px;}   
.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}   
.table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}   
</style>  
</head>  
<body>  
    <div class="table">  
        <div class="table-tr">  
            <div class="table-th">省份/直辖市</div>  
            <div class="table-th">GDP(亿元)</div>  
            <div class="table-th">增长率</div>  
        </div>  
        <div class="table-tr">  
            <div class="table-td">广东</div>  
            <div class="table-td">72812</div>  
            <div class="table-td">8.0%</div>  
        </div>  
        <div class="table-tr">  
            <div class="table-td">河南</div>  
            <div class="table-td">37010</div>  
            <div class="table-td">8.3%</div>  
        </div>  
        <div class="table-tr">  
            <div class="table-td">江苏</div>  
            <div class="table-td">70116</div>  
            <div class="table-td">8.5%</div>  
        </div>  
    </div>  
</body>  
</html>

运行效果

如何搭建CSSdisplay属性的table表格布局

2、列合并实现表格

实现思路：基于display:table的表格实现，没有<table>的rowspan和colspan单元格合并的实现，所以曲折实现，将表格每行单独嵌套一个独立的表格，这样在嵌套的独立表格内部，单元格合并就能通过控制嵌套表格的行数和列数以及单元格的宽高来实现

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>基于display列合并表格</title>  
<style type="text/css">  
.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}   
.table {display: table; width: 80%; border-collapse: collapse;}   
  
.table-tr {display: table-row; height: 30px;}   
.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}   
.table-td {display: table-cell; height: 100%;}   
  
.sub-table {width: 100%;height: 100%;display: table;}   
.sub-table-tr {display: table-row; height: 100%;}   
.sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}   
  
</style>  
</head>  
<body>  
  
<div class="table">  
    <div class="table-tr">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="table-th" style="width: 40%;">省份／直辖市</div>  
                    <div class="table-th" style="width: 30%;">GDP(亿元)</div>  
                    <div class="table-th" style="width: 30%;">增长率</div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="table-tr">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="sub-table-td" style="width: 40%;">广东</div>  
                    <div class="sub-table-td" style="width: 30%;">72812</div>  
                    <div class="sub-table-td" style="width: 30%;">8.0%</div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="table-tr">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="sub-table-td" style="width: 40%;">河南</div>  
                    <div class="sub-table-td" style="width: 30%;">37010</div>  
                    <div class="sub-table-td" style="width: 30%;">8.3%</div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="table-tr">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="sub-table-td" style="width: 40%;">江苏</div>  
                    <div class="sub-table-td" style="width: 30%;">70116</div>  
                    <div class="sub-table-td" style="width: 30%;">8.5%</div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="table-tr">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="sub-table-td" style="width: 70%;">各省／直辖市GDP平均增长率</div>  
                    <div class="sub-table-td" style="width: 30%;">8.26%</div>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>

运行效果

如何搭建CSSdisplay属性的table表格布局

3、行合并表格

行合并的实现思路：与列合并的实现思路类似，将有单元格合并的列单独嵌套一个display为table的DIV，高度=单行高*单元格合并数目的倍数，同行的其他列同样均单独嵌套DIV，实例代码如下

XML/HTML Code复制内容到剪贴板


  2. <!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>基于display的行合并表格</title>  
<style type="text/css">  
.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}   
.table {display: table; width: 80%; border-collapse: collapse;}   
  
.table-tr {display: table-row; height: 30px;}   
.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}   
.table-td {display: table-cell; height: 100%;}   
  
.sub-table {width: 100%;height: 100%;display: table;}   
.sub-table-tr {display: table-row; height: 100%;}   
.sub-table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}   
  
</style>  
</head>  
<body>  
  
<div class="table">  
    <div class="table-tr">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="table-th" style="width: 40%;">省份／直辖市</div>  
                    <div class="table-th" style="width: 30%;">GDP(亿元)</div>  
                    <div class="table-th" style="width: 30%;">增长率</div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="table-tr">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="sub-table-td" style="width: 40%;">广东</div>  
                    <div class="sub-table-td" style="width: 30%;">72812</div>  
                    <div class="sub-table-td" style="width: 30%;">8.0%</div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="table-tr" style="height:60px;">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="sub-table-td" style="width: 40%; border: none;">  
                        <div class="sub-table">  
                            <div class="sub-table-tr" style="height:50%;">  
                                <div class="sub-table-td" style="width: 100%; height:50%;">  
                                    河南   
                                </div>  
                            </div>  
                            <div class="sub-table-tr" style="height:50%;">  
                                <div class="sub-table-td" style="width: 100%; height:50%;">  
                                    江苏   
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="sub-table-td" style="width: 30%;border: none;">  
                        <div class="sub-table">  
                            <div class="sub-table-tr" style="height:50%;">  
                                <div class="sub-table-td" style="width: 100%; height:50%;">  
                                    37010   
                                </div>  
                            </div>  
                            <div class="sub-table-tr" style="height:50%;">  
                                <div class="sub-table-td" style="width: 100%; height:50%;">  
                                    70116   
                                </div>  
                            </div>  
                        </div>  
                       
                    </div>  
                       
                    <div class="sub-table-td" style="width: 30%;border: none;">  
                        <div class="sub-table">  
                            <div class="sub-table-tr">  
                                <div class="sub-table-td" style="width: 100%;">  
                                    8.4%   
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="table-tr">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="sub-table-td" style="width: 70%;">各省／直辖市GDP平均增长率</div>  
                    <div class="sub-table-td" style="width: 30%;">8.26%</div>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>

运行效果：

如何搭建CSSdisplay属性的table表格布局

看完上述内容，你们掌握如何搭建CSSdisplay属性的table表格布局的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网VUE频道，感谢各位的阅读！

--结束END--

本文标题: 如何搭建CSSdisplay属性的table表格布局

本文链接: https://lsjlt.com/news/81233.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何搭建CSSdisplay属性的table表格布局
    如何搭建CSSdisplay属性的table表格布局，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。项目改造中遇到DIV+CSS实现的table...
    99+
    2024-04-02
  • CSS 表格布局属性解读：table 和 display
    在前端开发中，表格布局是常用的一种布局方式。CSS提供了一些表格布局属性，其中最常用的是table和display属性。下面将详细解读这两个属性，并给出具体的代码示例。一、table 属性table是CSS中用于设置元素为表格布局的属性。通...
    99+
    2023-10-21
    Grid Float flex
  • 如何通过Css Flex 弹性布局实现响应式表格布局
    在前端开发中，响应式布局是一个非常重要的概念。随着移动设备的普及，网页需要适应不同的屏幕尺寸，以提供更好的用户体验。而表格是网页中常用的布局方式之一。在本文中，我们将介绍如何利用CSS Flex弹性布局实现响应式表格布局。CSS Flex弹...
    99+
    2023-10-21
    响应式布局 表格布局 Flex 布局
  • 如何使用CSS属性创建响应式布局
    如何使用CSS属性创建响应式布局随着移动设备的普及和多终端的兴起，响应式布局越来越受到开发者的重视。通过使用CSS属性，我们可以轻松地实现响应式布局，让网页在不同终端上都能够达到良好的显示效果。本文将介绍如何使用CSS属性创建响应式布局，并...
    99+
    2023-11-18
    响应式设计 CSS媒体查询 CSS响应式布局
  • HTML布局如何使用表格
    本篇内容介绍了“HTML布局如何使用表格”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 　　使用HTML...
    99+
    2024-04-02
  • DIV中如何使用布局属性
    DIV中如何使用布局属性，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。DIV绝对位置属性：绝对位置属性有四个属性：top、ri...
    99+
    2024-04-02
  • 如何使用CSS表格属性
    小编给大家分享一下如何使用CSS表格属性，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 表格边框 如需在 CSS 中配置...
    99+
    2024-04-02
  • CSS表格属性如何设置
    本文小编为大家详细介绍“CSS表格属性如何设置”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS表格属性如何设置”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。效果良好的表属性...
    99+
    2024-04-02
  • HTML布局技巧：如何使用position属性进行层叠布局
    在网页设计中，布局是一项非常重要的任务。其中，层叠布局是一种常见且实用的布局方式，通过使用position属性，我们可以实现元素的精确定位和重叠效果。本文将介绍position的四个取值及其应用场景，并提供具体的代码示例。position的...
    99+
    2023-10-21
    HTML布局 position属性 层叠布局
  • HTML布局技巧：如何使用clear属性进行布局修整
    引言：在Web开发中，我们常常会面临元素布局不符合预期的问题。有时候，元素在浮动时会导致其他元素错位或者重叠。针对这一问题，我们可以使用clear属性进行布局修整，以确保元素在正确的位置上。一、clear属性的含义clear属性用于指定一个...
    99+
    2023-10-21
    html clear属性 布局修整
  • 如何通过Css Flex 弹性布局实现不规则的网格布局
    在网页设计中，常常需要使用网格布局来实现页面的分割和排版，通常的网格布局都是规则的，每个网格大小相同，而有时候我们可能需要实现一些不规则的网格布局。CSS Flex 弹性布局是一种强大的布局方式，它可以很容易地实现各种网格布局，包括不规则的...
    99+
    2023-10-21
    网格布局 弹性布局 flex布局
  • 如何理解CSS Grid布局中的网格布局
    本篇内容主要讲解“如何理解CSS Grid布局中的网格布局”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何理解CSS Grid布局中的网格布局”吧!为什么我们...
    99+
    2024-04-02
  • HTML布局技巧：如何使用position属性进行绝对定位布局
    HTML布局技巧：如何使用position属性进行绝对定位布局在网页设计中，布局是一个至关重要的方面。通过合适的布局，我们可以使网页看起来更加清晰、有序，提高用户体验。而其中，使用position属性进行绝对定位布局是一种常见的方法。一、p...
    99+
    2023-10-25
    布局 绝对定位 HTML布局技巧：position属性
  • HTML布局技巧：如何使用clear属性进行页面布局修正
    在网页开发过程中，经常会遇到布局问题，尤其是在使用浮动元素时。浮动元素在脱离文档流后，可能会导致父元素高度塌陷，从而影响整个页面布局。为了解决这个问题，我们可以使用clear属性来进行布局修正。清除浮动的常用方法是使用clear属性，其中常...
    99+
    2023-10-21
  • 如何使用HTML和CSS创建一个响应式表格布局
    如何使用HTML和CSS创建一个响应式表格布局HTML是一种用于构建网页结构的标记语言，而CSS则用于设置网页的样式和布局。在网页设计中，表格是一种常见的元素，用于以表格形式展示数据。本文将介绍如何使用HTML和CSS来创建一个响应式的表格...
    99+
    2023-10-27
    CSS html 响应式布局
  • 如何使用HTML表格布局创建一个数据展示页面
    HTML表格是一种常见的布局工具，可以用于创建数据展示页面。通过合理的利用表格的结构和属性，可以创建出清晰、易读且美观的数据展示页面。一、基本的表格结构在HTML中，表格由table、tr和td标签组成。table标签用于定义表格，tr标签...
    99+
    2023-10-21
    HTML表格布局 数据展示页面
  • 如何使用Css Flex 弹性布局创建响应式卡片布局
    在现代网页设计中，响应式布局是一种必不可少的设计方式。而弹性布局（Flexbox）是一种强大而灵活的布局模型，可以让我们更轻松地创建响应式布局。本文将介绍如何使用Css Flex 弹性布局创建一个简单的响应式卡片布局，并提供具体的代码示例。...
    99+
    2023-10-21
    响应式 布局 CSS flex
  • 如何使用CSS Positions布局实现弹性网格
    CSS Positions布局是网页布局中常用的一种方式，它可以实现弹性网格的效果，让网页元素在不同设备上自适应显示。在本文中，我们将介绍如何使用CSS Positions布局来实现弹性网格，并提供具体的代码示例。一、理解CSS Posit...
    99+
    2023-10-21
    布局 CSS Positions 弹性网格
  • navicat建表如何设置唯一属性
    如何在 navicat 中设置唯一属性 第一步：创建表 打开 Navicat 并连接到数据库。 右键单击 Schemas 或 Databases 节点，然后选择 "新建表"。 在 "表...
    99+
    2024-04-23
    navicat
  • 如何使用HTML和CSS实现网格列表布局
    在现代网页设计中，网格列表布局成为了一个非常常见的布局模式。它可以帮助我们轻松地创建出漂亮的网页，让内容清晰地排列在网页中。本文将介绍如何使用HTML和CSS来实现网格列表布局，并提供具体的代码示例。首先，我们需要使用HTML来构建网页的基...
    99+
    2023-10-21
    CSS html 网格布局
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作