`

带滚动条的DIV

    博客分类:
  • html
 
阅读更多
<html>

<title>
</title>

<body>
<div style="height:300px; overflow-y:scroll; overflow-x:scroll;">
	<table width="100%" border="1px" cellspacing="0px" style="border-collapse:collapse">
		<thead>
			<tr>
				<td style="background:blue" width="10%">AAA</td>
				<td style="background:blue" width="20%">BBB</td>
				<td style="background:blue" width="50%">CCC</td>
				<td style="background:blue" width="10%">DDD</td>
				<td style="background:blue" width="">DDD</td>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
		</tbody>
	</table>
<div>

</body>
</html>
分享到:
评论

相关推荐

    div滚动条 带滚动条的div div滚动条样式

    DIV 滚动条样式详解 在 HTML 中,我们经常需要在 DIV 元素中添加滚动条,以便在内容超出 DIV 区域时,能够滚动查看内容。这篇文章将详细介绍如何使用 CSS 样式表来实现 DIV 滚动条的样式设置。 什么是 DIV 滚动条...

    div滚动条优化

    在网页设计中,div元素是常用的布局容器,而滚动条则是当内容超出div范围时,帮助用户浏览更多内容的重要交互工具。"div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来...

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    一款好看的DIV+CSS滚动条

    标题提及的"一款好看的DIV+CSS滚动条"是指利用这种方法创建的自定义滚动条,它可以提升网站的用户体验和视觉吸引力。 滚动条通常在内容超过容器显示范围时出现,允许用户浏览隐藏的部分。在默认情况下,浏览器会...

    Android手机版浏览器DIV滚动条失效解决方案

    在Android平台上,开发一款手机版浏览器时,可能会遇到一个常见的问题:在特定情况下,网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...

    JQuery 随鼠标滚动条滚动的div

    标题中的“JQuery 随鼠标滚动条滚动的div”是指使用JQuery库来实现一个功能,即当用户滚动页面时,某个特定的div元素会跟随滚动条一起移动。这个功能在网页设计中常见于侧边栏菜单、广告条或者固定导航栏等,目的是...

    js 随鼠标滚动条滚动的div

    在JavaScript中,实现一个div元素随鼠标滚动条滚动的效果,主要涉及到两个关键概念:事件监听和CSS定位。这个效果常用于创建固定定位的侧边栏、头部导航等元素,即使页面滚动,它们仍然保持在视口中的特定位置。 ...

    如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

    "让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中,我们常常需要让某个DIV元素固定在页面的某个位置,而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现,特别是使用fixed值。...

    jqueryDIV滚动条

    jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

    div滚动条样式一览-div+css设计网

    而当这些`div`元素中的内容超出其设定的宽度或高度时,滚动条就会出现,以帮助用户浏览不可见的部分。在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、...

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    浮动div,页面两边滚随滚动条滚动的DIV

    在本案例中,"页面两边滚随滚动条滚动的DIV"是指一种特殊的效果,即一个div元素会随着用户滚动页面而始终保持在屏幕的一侧可见,这样的设计可以用来显示重要的导航栏或者侧边栏信息。 要实现这种效果,通常需要结合...

    jQuery实现将div的滚动条滚动到指定位置

    当需要控制div元素中的滚动条滚动到特定位置时,jQuery提供了一个简单易用的方法。本篇文章将深入探讨如何利用jQuery实现这一功能。 首先,我们需要了解几个基本概念: 1. **div**: 在HTML中,div(division)是一...

    DIV滚动悬浮层(滚动条动,层不动)

    通过这种方式,当页面滚动时,悬浮层会根据我们的需求进行动态调整,实现"滚动条动,层不动"的效果。 当然,实际的项目可能会更复杂,比如要考虑不同设备的响应式布局,或者添加动画效果等。但以上基础步骤已经涵盖...

    利用div+jquery自定义滚动条

    在这里,`div`可以作为我们需要自定义滚动条的容器,通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如,如果想让div在内容过多时显示横向滚动条,可以这样设置CSS样式: ```css div.scroll-container {...

    滚动条,div滚动条,图层下拉条

    本项目专注于“滚动条”的定制化,特别是针对`div`元素和图层下拉条的特效。通过自定义滚动条的样式和功能,可以提升网站的用户体验和视觉效果。 在HTML中,滚动条通常是自动出现的,但默认样式往往与网站的设计...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    如果表格嵌套在具有滚动条的div元素内,则需要确保该div元素的宽度不被内部滚动条所影响。具体做法是将div内的表格容器(tableContainer)以及表格主容器(tableMain)的宽度设置为与表格头部(tableMainHead)的宽度一致...

    div随滚动条上下滚动

    在网页设计中,"div随滚动条上下滚动"是一种常见的动态效果,通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现,以增加用户体验,使某些元素如导航栏、侧...

    拖动div 内部有滚动条

    在处理带有内部滚动条的 `div` 时,我们常常需要实现拖动功能,让用户能够通过鼠标拖动来查看内容,特别是在内容超出 `div` 边界时。这种效果常见于各种自定义滚动条或者数据展示区域的设计。 要实现“拖动div内部...

    随滚动条移动的DIV层

    ### 随滚动条移动的DIV层:实现与解析 #### 一、概述 在网页设计与开发过程中,为了提高用户体验以及页面的交互性,常常会遇到需要制作一个随滚动条移动的元素(如提示框、广告栏等)。本文将通过分析一段具体的...

Global site tag (gtag.js) - Google Analytics