table表格实现标题与内容左右分布

主要讲述table配合css实现标题在左侧,内容在右侧水平排序的方法,可适应不同宽度,下面实例加了不换行出省略号的方法,可以配合title属性或element的Tooltip 文字提示等去实现鼠标悬浮弹出完整...

主要讲述table配合css实现标题在左侧,内容在右侧水平排序的方法,可适应不同宽度,下面实例加了不换行出省略号的方法,可以配合title属性或element的Tooltip 文字提示等去实现鼠标悬浮弹出完整文字内容的效果,先看下效果图,下面有示例代码。

attachments-2022-01-CxwrlQzg61dbeeec8168d.png


html代码:

<div class="table-wrapper">
			<table class="main-table" cellspacing="0" cellpadding="0">
				<tr>
					<td>开始节点:</td>
					<td>任务中编制审核流程</td>
					<td>开始时间:</td>
					<td>2022-01-10 02:53:37</td>
					<td>提 交 人:</td>
					<td>李丹</td>
					<td>提 交 人:</td>
					<td>李丹</td>
				</tr>
				<tr>
					<td>流程节点:</td>
					<td>牵头单位分管领导审批</td>
					<td>处理时间:</td>
					<td>2022-01-10 02:53:37</td>
					<td>处 理 人:</td>
					<td>刘鹏</td>
					<td>处理结果:</td>
					<td>通过</td>
					<td>处理意见:</td>
					<td>通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过</td>
				</tr>
				<tr>
					<td>流程节点:</td>
					<td>李丹</td>
					<td>处理时间:</td>
					<td>李丹</td>
					<td>处 理 人:</td>
					<td>李丹</td>
					<td>处理结果:</td>
					<td>李丹</td>
					<td>处理意见:</td>
					<td>李丹</td>
				</tr>
				<tr>
					<td>流程节点:</td>
					<td>李丹</td>
					<td>处理时间:</td>
					<td>李丹</td>
					<td>处 理 人:</td>
					<td>李丹</td>
					<td>处理结果:</td>
					<td>李丹</td>
					<td>处理意见:</td>
					<td>李丹</td>
				</tr>
			</table>
		</div>


css代码:

<style type="text/css">
		.main-table {
			width: 100%;
			border-top: 1px solid #E6EAEE;
			border-left: 1px solid #E6EAEE;
			table-layout: fixed;
		}

		.main-table tr td {
			height: 35px;
			box-sizing: border-box;
			padding: 10px 0 10px 5px;
			border-top: 1px solid #E6EAEE;
			/* border-right: 1px solid #E6EAEE; */
		}

		/* 设置标题 */
		.main-table tr :nth-child(odd) {
			background-color: #EFF3F6;
			color: #393C3E;
			font-weight: normal;
			text-align: center;
			/* width: 80px !important; */
		}

		/* 设置内容 */
		.main-table tr :nth-child(even) {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	</style>

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. 沉迷学习 0 文章