1.自適應屏幕大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#tb-data-table{width: 100%;min-width: 600px;table-layout: fixed;border:0;background-color: #BFBFBF}
#tb-data-table #tb-data-title td{background-color: #BFBFBF;color: #333;height:35px;font-size: 14px;font-weight:500}
#tb-data-table tr{height: 35px;}
#tb-data-table tr td{padding: 5px 10px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer}
.tb-data-cont{color: #333;font-size: 12px;}
.tb-data-cont tr td:hover{background-color: red}
</style>
<table cellpadding="0" cellspacing="1" id="tb-data-table">
<tr class="tb-data-title">
<th bgcolor="#FFFFFF">編號</th>
<th bgcolor="#FFFFFF">客戶名稱</th>
<th bgcolor="#FFFFFF">聯繫電話</th>
<th bgcolor="#FFFFFF">訂單編號</th>
<th bgcolor="#FFFFFF">訂單狀態</th>
<th bgcolor="#FFFFFF">支付方式</th>
<th bgcolor="#FFFFFF">訂單金額</th>
<th bgcolor="#FFFFFF">支付時間</th>
</tr>
<tr class="tb-data-cont">
<td bgcolor="#FFFFFF">201805291232120</td>
<td bgcolor="#FFFFFF">會飛的魚</td>
<td bgcolor="#FFFFFF" title="17382123229">17382123229</td>
<td bgcolor="#FFFFFF" title="2233232112">2233232112</td>
<td bgcolor="#FFFFFF">支付成功</td>
<td bgcolor="#FFFFFF">複製包</td>
<td bgcolor="#FFFFFF">複製包</td>
<td bgcolor="#FFFFFF">複製包</td>
</tr>
</table>
</body>
</html>