使用div实现table效果

最新推荐文章于 2024-08-27 14:12:16 发布
最新推荐文章于 2024-08-27 14:12:16 发布
阅读量1.5k 收藏 3
点赞数
原文链接：http://www.cnblogs.com/joshinrai/p/6668392.html
版权
本文介绍了如何使用CSS的display属性模拟table布局，包括如何实现单元格合并。详细讲述了table、table-row、table-cell等display属性的作用，并提供了普通表格、列合并和行合并的示例代码。
摘要由CSDN通过智能技术生成

  1. 项目改造中遇到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、普通表格

  4. <!DOCTYPE html>  
  5. <html>  
  6. <head>  
  7. <meta charset="UTF-8">  
  8. <title>display普通表格</title>  
  9. <style type="text/css">  
  10. .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}   
  11. .table {display: table; width: 80%; border-collapse: collapse;}   
  12. .table-tr {display: table-row; height: 30px;}   
  13. .table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;}   
  14. .table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}   
  15. </style>  
  16. </head>  
  17. <body>  
  18.     <div class="table">  
  19.         <div class="table-tr">  
  20.             <div class="table-th">省份/直辖市</div>  
  21.             <div class="table-th">GDP(亿元)</div>  
  22.             <div class="table-th">增长率</div>  
  23.         </div>  
  24.         <div class="table-tr">  
  25.             <div class="table-td">广东</div>  
  26.             <div class="table-td">72812</div>  
  27.             <div class="table-td">8.0%</div>  
  28.         </div>  
  29.         <div class="table-tr">  
  30.             <div class="table-td">河南</div>  
  31.             <div class="table-td">37010</div>  
  32.             <div class="table-td">8.3%</div>  
  33.         </div>  
  34.         <div class="table-tr">  
  35.             <div class="table-td">江苏</div>  
  36.             <div class="table-td">70116</div>  
  37.             <div class="table-td">8.5%</div>  
  38.         </div>  
  39.     </div>  
  40. </body>  
  41. </html>   

2、列合并实现表格

实现思路：基于display:table的表格实现，没有<ta

最低0.47元/天 解锁文章
weixin_30444105
关注
用div实现像table一样的布局方法
10-30
下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧。
div+css实现两列table效果示例
12-13
在网页设计中，使用`div`和`css`布局是一种常见的方法，它可以实现灵活多样的网页结构。在本示例中，我们看到如何利用这些技术创建一个两列的表格效果。这种效果通常用于构建信息输入表单或者数据展示区域。 首先，...
通过div模拟table
dexia7362的博客
01-16 206
参考： https://css-tricks.com/complete-guide-table-element/ 不要使用内联样式，但只是为了了解这里是如何去： <section style="display: table;"> <header style="display: table-row;"> <div style="...
前端入门：静态网页内不规则表格的编写
最新发布
全栈学习ing
08-27 514
对于这种表格的编写，在没有深入学习前端的基础下，想通过行内样式，内部和外部样式的编写达到这种效果是较为困难的。作为在内部样式中插入的。
关于用div实现table的效果
weixin_38169562的博客
03-15 320
这段时间在实现甘特图，先是用一个2X2的表格布局，表格里面填4个div，让右下角的div出现x和y坐标的滚动条，分别实现右上方的div还有左下方的div的滚动条同步，用百分比控制宽度，弄来弄去div的宽度控制不到。还好huacn的指点，用div来代替表格布局。我把基本代码发出来给大家共享。 <divid="main"style="border:1pxdas...
div模拟table
chouchilei5210的博客
03-16 183
CSS： .head{ display:table; position:relative; margin:10px0; width:100%; } .headdiv{ height:100%;display:table-cell; ...
使用原生div制作table表格
兔子的博客
12-02 2223
在移动使用横屏表格功能，横屏后无法实现同向滚动功能，此时使用div制作table，实现容器内的滚动
div 内table 居中实现代码
12-10
在提供的代码示例中，使用了`div`和`table`元素，以及CSS样式来实现这个效果。下面将详细解析这些代码并解释其工作原理。 首先，我们看CSS部分： ```css #dlgReply { /*display: table-cell; text-align: center;...
css用div实现table效果
honey_seve7n的博客
10-11 1300
最近项目需要实现类似table样式，使用div实现了如上图的效果： html代码如下 <div class="table-wrapper"> <div class="table-item"> <span class="table-title">能量(kcal)</span> <span class...
如何让Div中的Table居中
LzwGlory的专栏
03-19 5264
有时候在Div中加上 里面的Table是不会居中的我们可以在Table中加上 margin:auto比如：
使用div模拟table
weixin_34168700的博客
10-16 946
本项目仅供参考，需要浏览器css支持display:flex,position:sticky等特性 为什么模拟table 从功能上来讲，行列的数据更适合使用table，所以当您的需求中没有固定表头，固定列时，请直接使用table，模拟table更多的是解决固定表头，固定列等事情。 table有哪些问题 body不能滚动 当数据量多时，...
DIV 实现表格布局
08-14
不用到table标签也能实现 table功能。
div模拟table兼容ie620140424
08-14
div模拟table兼容ie620140424。table自适应，表头的列宽与表体列宽一致，即表头边框与表体边框对齐
div模拟table滚动时表头固定，兼容ie6
04-24
div模拟table滚动时表头固定，兼容ie6；且table自适应，表头的列宽与表体列宽一致，即表头边框与表体边框对齐
用DIV轻松实现自适应Table
chezaotu5026的博客
11-13 603
<body> <div style="display:table;border:1px red solid;width:100%;"> <div style="display:table-caption;text-align:center;">My...
表头的table实现与div实现
你，若盛开的专栏
03-02 811
1.table实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格实现表头</title> <style> table{ width:100%; ...
html css div开发table表格
bluemengcom的博客
06-11 1269
html css div开发类似table表格
用div来代替table
wsgzjdbb的博客
07-01 2442
用div来代替table概述实战 概述 table是我们日常开发中经常用到的HTML标签，但我们也经常因为table饱受折磨，原生的table的样式丑出天际，第三方框架的样式可能样式是好看点了，但可能并不是我们想要的样子。面对这些情况，我觉得自己用div写去一个table是一个很好的方法，样式全部可按照自己想要的样子调整。 实战 首先贴出全部代码： <!DOCTYPE html> <html> <head lang="zh"> <meta charset="u
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值