table-layout:fixed;
2018-12-14 本文已影响3人
索隆萨克
属性均分表格列宽度，也可设定宽度，设定后剩下的依旧均分剩余宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
font-size: 12px;
color: #333
}
li {
list-style: none;
}
table {
border: 2px solid #ccc;
width: 100%;
text-align: center;
border-collapse: collapse;
table-layout: fixed;
}
td,
th {
height: 30px;
border: 2px solid #ccc;
word-break: break-all;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table width="400" border="1" id="table1">
<tr>
<td>3</td>
<td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td width="40%">5</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
