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
