概述

table是我们日常开发中经常用到的HTML标签，但我们也经常因为table饱受折磨，原生的table的样式丑出天际，第三方框架的样式可能样式是好看点了，但可能并不是我们想要的样子。面对这些情况，我觉得自己用div写去一个table是一个很好的方法，样式全部可按照自己想要的样子调整。

实战

首先贴出全部代码：

<!DOCTYPE html>
<html><head lang="zh"><meta charset="utf-8" /><title>Test</title></head><style>.box-table {border-collapse: collapse;display: table;width: 100%;font-size: 14px;}.box-row {border-bottom: 1px solid #EBEEF5;display: table-row;}.left-box {padding: 10px;vertical-align: middle;display: table-cell;word-break: break-all;color: #606266;width: 30%;min-width: 50px;}.right-box {padding: 10px;vertical-align: middle;display: table-cell;word-break: break-all;}</style><body><div class="box-table"><div class="box-row"><div class="left-box">国家</div><div class="right-box">省份</div></div><div class="box-row"><div class="left-box">中国</div><div class="right-box">广东</div></div><div class="box-row"><div class="left-box">中国</div><div class="right-box">北京</div></div></div></body></html>

效果图：

其实这里的关键是css的display属性，我们平时用得比较多的是none、block、inline和inline-block等，但还有挺多值可用的。上面用到的是table、table-row和table-cell，看下图：

上图原地址：
https://www.w3school.com.cn/cssref/pr_class_display.asp

用div来代替table相关推荐

Codeforces Round #443 (Div. 2) B. Table Tennis
Codeforces Round #443 (Div. 2) B. Table Tennis 879B 啊啊啊啊啊啊做的时候太天真了--一开始的直觉是对的--orz后来想多了,pretest ...
div中的table内容过多时不超出div的范围解决方法
转载自 div中的table内容过多时不超出div的范围解决方法问题描述: 在做界面展示时,table的内容过多,超出div的大小,看着table的边框盖过了div的边框,不美观. 问题解决: ...
贪心 Codeforces Round #273 (Div. 2) C. Table Decorations
题目传送门 1 /* 2 贪心:排序后,当a[3] > 2 * (a[1] + a[2]), 可以最多的2个,其他的都是1个,ggr,ggb, ggr... ans = a[1] + a[2]; ...
div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
HTML div表格排版,畅谈DIV排版和table排版的区别
本文向大家简单介绍一下DIV排版和table排版的区别,除特殊需求外,贸然采用DIV排版,并不理智.当然,CSS排版取代html是一个趋势,但现在还没有成熟.除页面十分简练的页面外,还是不建议用DIV ...
html5绘制布局图,html5 div布局与table布局详解
本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下 div布局:html+css实现简单布局. #container中height不能写成百分数,必须为具体高度. d ...
如何让Div中的Table居中
如何让DIV中的Table居中呢? 首先在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中 ...
div中的table自动居中
div中的table自动居中直接上代码 <table style="margin: 0 auto"><thead ><th>商品编号</ ...
html5 div布局table,H5的div布局与table布局详解
这次给大家带来H5的div布局与table布局详解,H5div布局与table布局的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例为大家解析了html5 p布局与table布局,供大家参考 ...

用div来代替table

用div来代替table

概述

实战

用div来代替table相关推荐

最新文章

热门文章