div css表格第一列不滚动（怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动）

本文目录

• 怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动
• 我有一个大div,里面有很多个小div,大div设置了滚动条，我想第一个小div不受滚动条影响,始终显示.
• 如何用css实现 表格第一列固定 其余内容横向滚动
• jsp页面怎么锁定表格中的第一行固定不会随滚动条滚动
• HTML，怎么使第一列，不随着滚动条滚动而滚动，固定第一列不管后面滚动多少列他依然显示，不要复制谢谢

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

可用的方法比较多，比较常见的是使用CSS。

1、使用CSS

CSS让DIV固定位置不随滚动条而滚动， fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。

（1）我们需要做的是，让body保持其原有高度，让html只有一个窗口那么高。代码我们可以这样写：

html{overflow:hidden;} body{height:100%;overflow:auto;}    

（2）我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上。

html{overflow:hidden;}body{height:100%;overflow:auto;}#rightform form{position:absolute;right:30px;top50px;}    

（3）页面由左侧菜单和右侧主体内容构成，右侧内容可能会很多，会出现翻屏。现在是要无论页面怎么翻屏滚动，左侧的菜单始终在左侧。请看CSS解决方案。

#site_nav{position:fixed; width:160px; padding:6px 10px; height:100%;  background:#ffc; overflow-y:auto;} #content{padding:10px 10px 10px 190px;}

（4）我设置左侧div#site_nav的样式，将其位置固定，即position:fixed，并且设置固定宽度，高度为100%，为了区分右侧内容，我设置了背景颜色background:#ffc。

接着，我将内容部分div#content设置其padding值，注意关键是padding-left:190px，只有大于左侧菜单宽度的padding值，才能使右侧主体内容部分不会与左侧菜单重叠。

2、不使用JS：

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “

我有一个大div,里面有很多个小div,大div设置了滚动条，我想第一个小div不受滚动条影响,始终显示.

设置滚动条的话只要是div内部的内容都会随着滚动条而移动；所以你想内容不受影响，那么就让它不要在div里面不就行了？比如设置绝对定位让div移动到位置，又或者是这个小div本来是与大div是同级的，你设置负值的外边距margin-bottom:-30px;就可以移动到下面去

如何用css实现 表格第一列固定 其余内容横向滚动

可以参考此样例：

.table{width:100%;overflow-x: scroll;background-color:#7c95b5;}.fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;}.fixedTable tr{line-height: 30px;border:1px solid #fff;}.fixedTable tr:first-child{height:40px;line-height: 40px;background-color:cadetblue;}.fixedTable td:first-child{position:absolute;width:105px;background-color:cadetblue;border:1px solid #fff;margin:-1px 0px 0px -1px;}.fixedColumn{width:99px;}

《html》《head》《meta name=“viewport“ content=“width=device-width,height=device-height,initial-scale=1.0,user-scalable=no“》《meta charset=“utf-8“》《title》使用css固定table第一列《/title》《link href=“css/table.css“ rel=“stylesheet“/》《/head》《body》《div class=“table“》《table class=“fixedTable“ border=“1“》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》第一列《/td》《td》第二列《/td》《td》第三列《/td》《td》第四列《/td》《td》第五列《/td》《td》第六列《/td》《td》第七列《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《tr》《td》固定列《/td》《td class=“fixedColumn“》《/td》《td》1《/td》《td》2《/td》《td》3《/td》《td》4《/td》《td》5《/td》《td》6《/td》《td》7《/td》《/tr》《/table》《/div》《/body》《/html》

View Code

适用移动端

转载于：www.mdcode.cn

jsp页面怎么锁定表格中的第一行固定不会随滚动条滚动

jsp页面锁定表格的第一行不动的方法是通过js实现的。1、html代码如下：《div class=“clscroll corner-header“》 《table》 《tr》 《th》 《/th》 《/tr》 《/table》《/div》《div class=“clscroll column-headers“ id=“clscroll-column-headers“》 《table》 《tr》 《th》Bus《/th》 《th》Plane《/th》 《th》Boat《/th》 《th》Bicycle《/th》 《/tr》 《/table》《/div》《div class=“clscroll row-headers“ id=“clscroll-row-headers“》 《table》 《tr》 《th》Red《/th》 《/tr》 《tr》 《th》Green《/th》 《/tr》 《tr》 《th》Blue《/th》 《/tr》 《tr》 《th》Orange《/th》 《/tr》 《tr》 《th》Purple《/th》 《/tr》 《tr》 《th》Yellow《/th》 《/tr》 《tr》 《th》Pink《/th》 《/tr》 《tr》 《th》Brown《/th》 《/tr》 《/table》《/div》《div class=“clscroll table-content“ id=“clscroll-content“》 《table》 《tr》 《td》Red Bus《/td》 《td》Red Plane《/td》 《td》Red Boat《/td》 《td》Red Bicycle《/td》 《/tr》 《tr》 《td》Green Bus《/td》 《td》Green Plane《/td》 《td》Green Boat《/td》 《td》Green Bicycle《/td》 《/tr》 《tr》 《td》Blue Bus《/td》 《td》Blue Plane《/td》 《td》Blue Boat《/td》 《td》Blue Bicycle《/td》 《/tr》 《tr》 《td》Orange Bus《/td》 《td》Orange Plane《/td》 《td》Orange Boat《/td》 《td》Orange Bicycle《/td》 《/tr》 《tr》 《td》Purple Bus《/td》 《td》Purple Plane《/td》 《td》Purple Boat《/td》 《td》Purple Bicycle《/td》 《/tr》 《tr》 《td》Yellow Bus《/td》 《td》Yellow Plane《/td》 《td》Yellow Boat《/td》 《td》Yellow Bicycle《/td》 《/tr》 《tr》 《td》Pink Bus《/td》 《td》Pink Plane《/td》 《td》Pink Boat《/td》 《td》Pink Bicycle《/td》 《/tr》 《tr》 《td》Brown Bus《/td》 《td》Brown Plane《/td》 《td》Brown Boat《/td》 《td》Brown Bicycle《/td》 《/tr》 《/table》《/div》2、css代码如下：.clscroll table { table-layout: fixed;}.clscroll td, .clscroll th { overflow: hidden;}.corner-header { float: left;}.column-headers { float: left; overflow: scroll;}.row-headers { clear: both; float: left; overflow: scroll;}.table-content { table-layout: fixed; float: left; overflow: scroll;}.clscroll td, .clscroll th { width: 200px; border: 1px solid black;}.row-headers, .table-content { height: 100px;}.column-headers, .table-content, .table-content table, .column-headers table { width: 400px;}3、js代码如下：$(“#clscroll-content“).scroll(function() {//锁定行 $(“#clscroll-row-headers“).scrollTop($(“#clscroll-content“).scrollTop()); $(“#clscroll-column-headers“).scrollLeft($(“#clscroll-content“).scrollLeft());});$(“#clscroll-column-headers“).scroll(function() { $(“#clscroll-content“).scrollLeft($(“#clscroll-column-headers“).scrollLeft());});$(“#clscroll-row-headers“).scroll(function() { $(“#clscroll-content“).scrollTop($(“#clscroll-row-headers“).scrollTop());});

HTML，怎么使第一列，不随着滚动条滚动而滚动，固定第一列不管后面滚动多少列他依然显示，不要复制谢谢

用 position:fixed就可以了在IE7以上版本及firefox、opera、safari里，都支持css属性“position:fixed“，它的作用就是将元素相对于窗口固定位置。不论窗口滚动与否，元素都会留在那个位置。#ads{ position:fixed; top:0; left:0; border:1px solid red; width:300px; height:250px;}