主要设置两个样式：
table{
table-layout: fixed; ==>固定布局的算法。在这种算法中，表格和列的宽度取决于col对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。
假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% （注意：此样式是关键）
td{
white-space: nowrap; ==>设置内容抵达容器边界会不会转到下一行
overflow: hidden; ==>不显示超过对象尺寸的内容（这个绝对不能少）,也就是说设置td里面的数据无论有多少，都不会换行
text-overflow: ellipsis; ==>将被隐藏的那部分用省略号代替。
}
示例1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table
{
table-layout: fixed;
width: 100%;
}
td
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<th>
第一列
</th>
<th>
第二列
</th>
</thead>
<tbody>
<tr>
<td>
<span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span>
</td>
<td>
超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容
</td>
</tr>
</tbody>
</table>
</body>
</html>
效果：
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<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>
</body>
<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>
</html>
效果：
