.t3 {
width: 100%;
table-layout: fixed;
}
.t3 td, .t3 th {
white-space: nowrap;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
}
- t1未经修饰的table;t2百分百宽度;t3固定列宽,文字过多显示省略号,如果table超过容器宽度,有滚动条。
完整代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
width: 500px;
background: #ccc;
margin: 0 auto;
overflow: auto;
}
table , table td, table, th{
border: 1px solid red;
border-collapse: collapse;
}
.t1 {}
.t2 {
width: 100%;
}
.t3 {
width: 100%;
table-layout: fixed;
}
.t3 td, .t3 th {
white-space: nowrap;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">
<h2>t1原始table</h2>
<table class="t1">
<thead>
<tr>
<th>hello</th>
<th>world</th>
</tr>
</thead>
<tbody>
<tr>
<td>faff</td>
<td>faff</td>
</tr>
</tbody>
</table>
<br>
<h2>t2宽度100%</h2>
<table class="t2">
<thead>
<tr>
<th>hello</th>
<th>world</th>
</tr>
</thead>
<tbody>
<tr>
<td>faff</td>
<td>faff</td>
</tr>
</tbody>
</table>
<br>
<h2>t3有滚动条</h2>
<table class="t3">
<thead>
<tr>
<th style="width: 400px;">400px</th>
<th style="width: 120px;">120px120px120px120px120px120px</th>
</tr>
</thead>
<tbody>
<tr>
<td>400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px400px</td>
<td>dfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfsdfasfs</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>