html+css 用table展示数据，列头过多4
发布网友
发布时间：2023-11-13 17:00
共2个回答
热心网友
时间：2024-10-28 02:39
1、表格的一列设置足够的宽度
2、表格放到div里，div设置你需要的宽度，且设置overflow:hidden;属性，表示超出了就用滚动条
上一个例子
<html xmlns="<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#table_content{margin:50px;padding:20px;width:800px;min-height:200px;overflow:scroll;border:1px solid #ccc;}
table{width:3755px;}
th,td{width:200px;border:1px solid #ccc;}
th{background:#ccc;}
</style>
</head>
<body>
<div id="table_content">
<table>
<tr>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
<th>我是5个字</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</div>
</body>
</html>
简单效果
热心网友
时间：2024-10-28 02:39
