1 基础版展示

点击前往在线展示

1.1代码

1.2HTML

<!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>使用div制作表格</title>
</head>
<body><div class="mytable1"><div class="myTr1"><div>11</div><div>12</div><div>13</div><div class="mytdRight">14</div></div><div class="myTr1"><div>21</div><div>22</div><div>23</div><div class="mytdRight">24</div></div><div class="myTr1"><div>31</div><div>32</div><div>33</div><div class="mytdRight">34</div></div><div class="myTr1"><div class="myButtom">41</div><div class="myButtom">42</div><div class="myButtom">43</div><div class="mytdRight myButtom">44</div></div></div>
</body>
</html>

1.3CSS

 .mytable1{width: 95%;margin: 0 auto;text-align: center;}.myTr1{width: 100%;height: 30px;background-color: rgba(26, 236, 15, 0.587);margin: 0 auto;display: flex;}.myTr1 div{flex: 1;height: 100%;background-color: rgba(11, 166, 232, 0.55);border-top: 1px red solid;border-left: 1px red solid;}.mytdRight{border-right: 1px red solid;} .myButtom{border-bottom: 1px red solid;}

2进阶版展示（动态生成表格）

点击前往在线展示

2.1代码

2.2HTML

<!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>
</head>
<body><input type="button" value="生成" onclick="getTable()"><div class="table" ></div>
</body>
</html>

2.3CSS

.table{width: 95%;background-color: rgb(11, 224, 244);margin: 0 auto;text-align: center;}.table .th{width: 100%;height: 30px;background-color: rgba(26, 236, 15, 0.587);margin: 0 auto;display: flex;}.table .th div{flex: 1;height: 100%;background-color: rgba(11, 166, 232, 0.55);border-top: 1px red solid;border-left: 1px red solid;}.tableButtom{border-bottom: 1px red solid;}.tableRight{border-right: 1px red solid;}

2.4JS

        function getTable(){let Table = document.querySelector(".table")Table.innerHTML = ""//假设有一个从后台传过来的数据串let data= "001,张三五,1.79,女,团员|002,杨毅,1.72,男,党员|003,杨春三,1.62,男,党员|004,张明明,1.72,女,团员";let tr = data.split("|")let str = ""for(let i=0;i<tr.length;i++){str += "<div class='th'>"let td = tr[i].split(",")for(let j=0;j<td.length;j++){if(i==tr.length-1 && j==td.length-1){str += "<div class='tableButtom tableRight'>"+td[j]+"</div>"continue}if(i==tr.length-1){str += "<div class='tableButtom'>"+td[j]+"</div>"continue}if(j==td.length-1){str += "<div class='tableRight'>"+td[j]+"</div>"continue}str += "<div>"+td[j]+"</div>"}str += "</div>"}Table.innerHTML = strconsole.log(str)}

2.5完整版

<!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{width: 95%;background-color: rgb(11, 224, 244);margin: 0 auto;text-align: center;}.table .th{width: 100%;height: 30px;background-color: rgba(26, 236, 15, 0.587);margin: 0 auto;display: flex;}.table .th div{flex: 1;height: 100%;background-color: rgba(11, 166, 232, 0.55);border-top: 1px red solid;border-left: 1px red solid;}.tableButtom{border-bottom: 1px red solid;}.tableRight{border-right: 1px red solid;}</style>
</head>
<body><input type="button" value="生成" onclick="getTable()"><div class="table" ></div><script>function getTable(){let Table = document.querySelector(".table")Table.innerHTML = ""//假设有一个从后台传过来的数据串let data= "001,张三五,1.79,女,团员|002,杨毅,1.72,男,党员|003,杨春三,1.62,男,党员|004,张明明,1.72,女,团员";let tr = data.split("|")let str = ""for(let i=0;i<tr.length;i++){str += "<div class='th'>"let td = tr[i].split(",")for(let j=0;j<td.length;j++){if(i==tr.length-1 && j==td.length-1){str += "<div class='tableButtom tableRight'>"+td[j]+"</div>"continue}if(i==tr.length-1){str += "<div class='tableButtom'>"+td[j]+"</div>"continue}if(j==td.length-1){str += "<div class='tableRight'>"+td[j]+"</div>"continue}str += "<div>"+td[j]+"</div>"}str += "</div>"}Table.innerHTML = strconsole.log(str)}</script>
</body>
</html>

使用div制作表格效果相关推荐

div制作表格，增减表格
div制作表格,增减表格 <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...
html div 制作表格,使用table制作表格
在使用table制作表格之前先了解一些相关属性. CSS border-spacing 属性: 说明:该属性指定分隔边框模型中单元格边界之间的距离.在指定的两个长度值中,第一个是水平间隔,第二个是垂直 ...
html如何实现表格效果,DIV+CSS技术实现类似table表格的效果
当前位置:网站首页 >> 网站技术 >> DIV+CSS技术实现类似table表格的效果 [发布人:站长之家发布日期:2015-04-03] 表格在网页制作中使用非常广 ...
div做表格 html5,div+css制作表格
本章给大家介绍如何用div+css制作表格,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. html: 花名册: 序号姓名年龄 footer footer footer 1 Jo ...
套用带标题行的表格样式_excel表格样式采用内置样式使用Excel 2010内置的单元格样式制作精美的表格效果...
excel表格样式采用内置样式使用Excel 2010内置的单元格样式制作精美的表格效果,最近到了季度汇报的时候,掌握一手excel技能在此刻显得多么重要,为了是你的excel看起来更高大上,今天教 ...
HTML5制作斑马线表格,JavaScript实现的斑马线表格效果【隔行变色】
本文实例讲述了JavaScript实现的斑马线表格效果.分享给大家供大家参考,具体如下: 虽然现在有很多框架可以轻松的实现斑马线效果,而且兼容性也很不错,比如bootstrap,但是不可否认的是使用J ...
html中td,dd属性,HTML的dl、dt、dd标记制作表格对决Table制作表过
html中,dl和dd和dt标签是什么意思,什么时候需要用定义列表的意思一般用在图文并排的时候应网友提问. html中,dl,dt,dd怎么使用 1,定义: 是一组合标签,使用了dt dd最外层就 ...
html ul做成表格,ul li css制作表格
实现方法:(利用div的ul和li列表标记打造类似表格效果) 我们首先分析一下如何制作:li是固定的宽度与高度(单元格),设置li在ul中浮动,当ul不够宽的时候,li就会自动另起一行排列(一行有多少 ...
CSS-ul制作表格，BFC，CSS书写顺序
ul制作表格方法1: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

使用div制作表格效果

使用div制作表格效果

1 基础版展示

1.1代码

1.2HTML

1.3CSS

2进阶版展示（动态生成表格）

2.1代码

2.2HTML

2.3CSS

2.4JS

2.5完整版

使用div制作表格效果相关推荐

最新文章

热门文章