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

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


 

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>