Table布局显示文字横排效果，以及table 给td设置圆角

最新推荐文章于 2024-06-17 01:58:07 发布

WCR_520

最新推荐文章于 2024-06-17 01:58:07 发布

阅读量1.1k

点赞数 1

分类专栏：该死的前端文章标签： css css3 html

本文链接：https://blog.csdn.net/FIQ_527/article/details/122242344

版权

该死的前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

上图
在这里插入图片描述
上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.span-font {
				font-size: 18px;
				color: rgb(255, 255, 255);
			}

			.span-font-small {
				font-size: 14px;
				color: rgb(255, 255, 255);
			}

			.span-font-small-time {
				font-size: 14px;
			}
		</style>
	</head>
	<body>



		<table id='c2-free-tag6' style="width:100%;border-spacing: 8px 0px;height:calc(100% - 30px);">

			<tr id='c2-free-tag7' style="height:100%">

				<td id='c2-free-tag8' style="background-color:rgb(64, 158, 255);text-align: center;border-radius: 6px;" width="24%">

					<div id='c2-free-tag'>
						<span class="span-font">{{totalNum}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="span-font-small">今日新增：{{inrNum}}<span><br />
								<span class="span-font">总任务数<span>

					</div>
				</td>
				<td id='c2-free-tag9' style="background-color:rgba(245, 108, 108, 1);text-align: center;border-radius: 4px;" width="19%">

					<div id='c2-free-tag2'>
						<div>
							<span class="span-font">{{failedNum}}<span><br />
									<span class="span-font">失败数量<span>
						</div>

					</div>
				</td>
				<td id='c2-free-tag10' style="background-color:rgba(73, 221, 171, 1);text-align: center;border-radius: 4px;" width="19%">

					<div id='c2-free-tag1'>
						<div>
							<span class="span-font">{{succedNum}}<span><br />
									<span class="span-font">成功数量<span>
						</div>

					</div>
				</td>
				<td id='c2-free-tag11' style="background-color:rgba(250, 200, 88, 1);text-align: center;border-radius: 4px;" width="19%">

					<div id='c2-free-tag3'>
						<div>
							<span class="span-font">{{runningNum}}<span><br />
									<span class="span-font">执行中数量<span>
						</div>

					</div>
				</td>
				<td id='c2-free-tag12' style="background-color:rgba(148, 148, 148, 1);text-align: center;border-radius: 4px;" width="19%">

					<div id='c2-free-tag4'>
						<div>
							<span class="span-font">{{freeNum}}<span></br>
									<span class="span-font">未执行数量<span>
						</div>

					</div>
				</td>
			</tr>
		</table>
		<div style="float:right;margin-right:8px;">
			<span class="span-font-small-time">截止当前时间：<span>
					<span class="span-font-small-time">{{updateTime}}<span>
		</div>

	</body>
</html>

解释一下样式

border-spacing: 10px 20px;//控制间距
float:right;//div浮动在右边
border-radius: 6px;//td设置圆角

WCR_520

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Table布局显示文字横排效果，以及table 给td设置圆角

上图上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .span-font { font-size: 18px; color: rgb(255, 255, 255); } .span-font-small { font-size: 14px; c
复制链接

扫一扫

专栏目录