<table id="table" class="table" data-pagination="false" width="100%" style='white-space: nowrap'> <tr> <td class="dg">加粉日期</td> <td class="dg">总推广费</td> <td class="dg">总加粉数</td> <td class="dg">总客户数</td> <td class="dg">总订单金额</td> {volist name="fields" id="fv"} <td>{$fv}</td> {/volist} </tr> <?php $n=5; ?> {volist name="time_arr" key="k" id="tv"} <tr> <td class="dg">{$tv.add_fans_time}</td> <td class="dg">{$tv.promotion_fee|default='-'}</td> <td class="dg">{$tv.add_fans|default='-'}</td> <td class="dg">{$tv.customer_number|default='-'}</td> <td class="dg">{$tv.order_money|default='-'}</td> {volist name="fields" id="fsv"} <td><?php echo isset($tv[$fsv]) ?$tv[$fsv]:'-'; ?></td> {/volist} </tr> {/volist} </table> 将以上代码中的表格前四列固定,剩余部门滚动显示
时间: 2024-02-10 12:15:44 浏览: 221
您想要实现的效果是固定表格的前四列,使其在滚动时保持在原位,而其余列则可以自由滚动。这可以通过CSS中的固定定位和overflow属性来实现。
首先,将表格的前四列放入一个单独的div中,并将其设置为固定定位:
```html
<div class="fixed-columns">
<table>
<tr>
<td class="dg">加粉日期</td>
<td class="dg">总推广费</td>
<td class="dg">总加粉数</td>
<td class="dg">总客户数</td>
</tr>
<!-- 前四列数据 -->
</table>
</div>
```
```css
.fixed-columns {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
```
然后,将整个表格放入另一个div中,并将其设置为overflow:auto以启用滚动:
```html
<div class="scrolling-table">
<table>
<tr>
<td class="dg">加粉日期</td>
<td class="dg">总推广费</td>
<td class="dg">总加粉数</td>
<td class="dg">总客户数</td>
<!-- 前四列数据 -->
{volist name="fields" id="fv"}
<td>{$fv}</td>
{/volist}
</tr>
{volist name="time_arr" key="k" id="tv"}
<tr>
<td class="dg">{$tv.add_fans_time}</td>
<td class="dg">{$tv.promotion_fee|default='-'}</td>
<td class="dg">{$tv.add_fans|default='-'}</td>
<td class="dg">{$tv.customer_number|default='-'}</td>
<td class="dg">{$tv.order_money|default='-'}</td>
<!-- 后面列数据 -->
{volist name="fields" id="fsv"}
<td><?php echo isset($tv[$fsv]) ?$tv[$fsv]:'-'; ?></td>
{/volist}
</tr>
{/volist}
</table>
</div>
```
```css
.scrolling-table {
overflow: auto;
margin-top: 20px; /* 避免表格被固定的四列遮挡 */
}
.scrolling-table td {
white-space: nowrap; /* 避免单元格换行 */
}
```
这样,表格的前四列将保持在固定位置,而其余列将在滚动时自由移动。
阅读全文
相关推荐









<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆瓣列表页</title>
<style>
body{ width: 800px;margin: 0 auto;background-image: url("/https/wenku.csdn.net/static/6.jpg");background-size: cover;}
h1{ color: rgb(35, 140, 205);}
a{
color: white;
background-color: rgb(35, 140, 205);
text-decoration: none;
border-radius: 8px;padding: 3px 5px;
}
table{ width: 100%;}
table,tr,td{ border: 2px solid black;border-collapse: collapse;}
td{ text-align: center;line-height: 35px;}
.adc{ background-color: rgb(35, 140, 205);color: white;font-size: 18px;font-weight: bold;}
.z{ color: rgb(0, 0, 0); font-size: 20px;}
</style>
</head>
<body>
欢迎使用豆瓣网
首页 电影类型列表 添加电影类型
添加电影
查看柱状图 查看饼状图
查看折线图
编号 名称 内容 创建日期 操作
{% for i in info %}
{{i[0]}} {{i[1]}} {{i[2]}} {{i[3]}}
修改 删除 查看
{% endfor %}
</body>
</html>添加分页


<html> <head> <title>人员管理界面</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> </head> <body> 员工列表 —— 显示所有员工信息 ID 姓名 电话号 地址 职位 职位编号 状态 证件照 <c:forEach items="${employees}" var="employees"> ${employees.id} ${employees.name} ${employees.phonenumber} ${employees.address} ${employees.job} ${employees.jobid} ${employees.state} ![]()
更改 | 删除 </c:forEach> </body> </html>给这个界面的表格实现一个分页的功能,每页的最大数目为5








