自适应宽度并Y轴滚动

最新推荐文章于 2024-06-19 12:18:05 发布

转载最新推荐文章于 2024-06-19 12:18:05 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1015065/blog/193665

文章标签：

#前端 #javascript #python #ViewUI

本文介绍了一种实现自适应宽度和垂直滚动的技术，通过JavaScript操作DOM元素，实现表格内容自适应屏幕宽度并保持垂直滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBspanC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自适应宽度并Y轴滚动</title>
<script type="text/javascript" src="/t/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		var w = $("#tb").width();
		//alert(w);
		//$("#tb").width(w+20);
		$("#tb").find("td").css("padding-right","20px");//加上
	});
});
</script>
</head>
<body>
<input type="button" value="click" id="btn" />
<span style="height:200px;overflow-x:hidden;overflow-y:auto;border:1px solid red;display:inline-block;">
<table id="tb" border=1 >
<tr><td>AAAAAAAAAAAAAaaaa</td></tr>
<tr><td>AAAAAAAAAAAAAaaaa</td></tr>
<tr><td>AAAAAAAAAAAAAaaaa</td></tr>
<tr><td>AAAAAAAAAAAAAaassssssssaA</td></tr>
<tr><td>AAAAAAAAAAAAAaaaa</td></tr>
<tr><td>AAAAAAAAAAAAAaaaa</td></tr>

<tr><td>AAAAAAAAAAAAAaaaa</td></tr>
<tr><td>AAAAAAAAAAAAAaaaa</td></tr>

<tr><td>AAAAAAAAAAAAAaaaa</td></tr>

<tr><td>AAAAAAAAAAAAAaaaa</td></tr>
</table>
</span>
</body>
</html>

转载于:https://my.oschina.net/u/1015065/blog/193665