demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
.th-div,.th-in{
width:100px;
height: 50px;
}
.td-div,.td-in{
width: 250px;
height: 70px;
font-size: 14px;
}
/*
.th-div,.td-div{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
*/
.th-div,.td-div{
table-layout: fixed;
white-space: normal;
word-break: break-all;
width: 100%;
overflow: hidden;
height: 60px;
}
/*
.th-in,.td-in{
overflow: hidden;
}*/
/* 布局 */
.t-left,.t-centrel,.t-right{
float: left;
}
.t-left,.t-right{
height: 10px;
width: 200px;
}
</style>
</head>
<body>
<div>
<div class="t-left">
<!-- left -->
</div>
<div class="t-centrel">
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<td class="th-in"><div class="th-div">header1</div></td>
<td class="th-in"><div class="th-div">header1</div></td>
<td class="th-in"><div class="th-div">header1</div></td>
<td class="th-in"><div class="th-div">header1</div></td>
</tr>
</thead>
<tbody>
<tr>
<td class="td-in"><div class="td-div">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div></td>
<td class="td-in"><div class="td-div">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div></td>
<td class="td-in"><div class="td-div">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div></td>
<td class="td-in"><div class="td-div">4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div></td>
</tr>
<tr>
<td class="td-in"><div class="td-div">5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div></td>
<td class="td-in"><div class="td-div">66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</div></td>
<td class="td-in"><div class="td-div">777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777</div></td>
<td class="td-in"><div class="td-div">8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</div></td>
</tr>
</tbody>
</table>
</div>
<div class="t-right">
<!-- right -->
</div>
</div>
</body>
</html>
picture: