用div来代替table

最新推荐文章于 2024-05-30 19:00:37 发布

wsgzjdbb

最新推荐文章于 2024-05-30 19:00:37 发布

阅读量2.1k

点赞数 4

分类专栏：前端文章标签： html css html5 css3

本文链接：https://blog.csdn.net/wsgzjdbb/article/details/107072922

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用div来代替table

概述
实战

概述

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

wsgzjdbb

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
用div来代替table

用div来代替table概述实战概述table是我们日常开发中经常用到的HTML标签，但我们也经常因为table饱受折磨，原生的table的样式丑出天际，第三方框架的样式可能样式是好看点了，但可能并不是我们想要的样子。面对这些情况，我觉得自己用div写去一个table是一个很好的方法，样式全部可按照自己想要的样子调整。实战首先贴出全部代码：<!DOCTYPE html><html> <head lang="zh"> <meta charset="u
复制链接

扫一扫