用户“呼呼呼1542”对问题“如何设置100％宽度的HTML表格，并在tbody内部有垂直滚动条？”的回答 - 问答 - 云+社区 - 腾讯云云+社区首页我怎样才能设置100％宽度的HTML表格，并在tbody内部有垂直滚动条？table {
width: 100%;
display: inline-
width: 100%;
height: 20
height: 200
display: inline-
width: 100%;
&th&Head 1&/th&
&th&Head 2&/th&
&th&Head 3&/th&
&th&Head 4&/th&
&th&Head 5&/th&
&td&Content 1&/td&
&td&Content 2&/td&
&td&Content 3&/td&
&td&Content 4&/td&
&td&Content 5&/td&
&/table&我想避免添加一些额外的div，我想要的是一个简单表，当我试图更改显示时，table-layout，position和在css表中的有很多的东西不能正常工作，只有在PX中带固定的宽度才能生效。写回答邀请回答如何设置100％宽度的HTML表格，并在tbody内部有垂直滚动条？写回答为了使&tbody&元素可滚动，我们需要改变它在页面上的显示方式，例如使用display：block; 将其显示为块级元素.由于我们改变了tbody的display属性，我们也应该改变这个属性，以防止破坏表格布局。所以我们执行了以下代码：thead, tbody { display: }
height: 100
/* Just for the demo
overflow-y:
/* Trigger vertical scroll
overflow-x:
/* Hide the horizontal scroll */
}Web浏览器将thead和tbody元素默认显示为row-group（table-header-group和table-row-group）。一旦我们改变了这一点，内部的tr元素不会填充它们容器的整个空间为了解决这个问题，我们必须计算tbody列的宽度，并通过JavaScript将相应的值应用到thead列。自动宽度列以下是上述逻辑的jQuery版本：// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
以下为输出(在Windows 7 Chrome 32上):全宽表，相对宽度列作为原始海报需要，我们可以将table扩展到其容器width的100％，然后使用表中每列的相对（百分比）width。table {
width: 100%; /* Optional */
tbody td, thead th {
width: 20%;
/* Optional */
}因为这个表有一个(某种)流体布局，我们应该调整thead容器调整大小时的列。因此，一旦窗口的大小调整，我们应该设置列的宽度：// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs输出如下：浏览器支持和替代方案我已经通过主要的Web浏览器（包括IE10 +）的新版本在Windows 7上测试了上述两个方法，并且已经生效了。然而，它中无法正常工作。因为在，所有元素都应遵循相同的结构属性。用display:为&thead&和&tbody&元素，我们打破了table的结构。通过JavaScript重新设计布局一种方法是重新设计(整个)表布局。使用JavaScript动态创建一个新布局，并动态处理和/或调整单元格的宽度/高度。例如，请看以下示例：jQuery插件(浮动/锁定/粘性表头插件)jQuery插件。(关于GitHub)jQuery插件(关于GitHub)DataTables。嵌套表这种方法使用两个嵌套表，其中包含一个div。第一table只有一个单元格具有div，第二个table放在div内。在CSS Play上检查..这在大多数浏览器上都是有效的。我们还可以通过JavaScript动态地完成上述逻辑。卷轴上有固定标头的表由于将垂直滚动条添加到&tbody&的目的是在每行顶部显示表格标题，所以我们可以将thead元素的位置保持fixed在屏幕的顶部。，来自.点击有关如何实现，来自...Pure CSS解决方案我添加了一个新方法，并对CSS声明进行了改进。固定宽度表在这种情况下，table应该有一个固定的width（包括列的宽度和垂直滚动条的宽度之和）。每列应该有一个特定的宽度，最后一列的thead元素需要一个更大的宽度，等于其他的宽度+垂直滚动条的宽度CSS代码：table {
width: 716 /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
tbody, thead tr { display: }
height: 100
overflow-y:
overflow-x:
tbody td, thead th {
width: 140
thead th:last-child {
width: 156 /* 140px + 16px scrollbar width */
}输出：宽100%的table在这种方法中，table的宽度为100％，对于每个th和td，width属性的值应小于100% / number of cols。另外，我们需要减少作为宽度垂直滚动条thead的宽度成。为了做到这一点，我们需要使用CSS 3.方法如下：table {
width: 100%;
border-spacing: 0;
thead, tbody, tr, th, td { display: }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
-moz-calc(100% - 16px);
calc(100% - 16px);
tr:after {
/* clearing float */
content: ' ';
visibility:
height: 100
overflow-y:
overflow-x:
tbody td, thead th {
width: 19%;
/* 19% is less than (100% / 5 cols) = 20% */
}注：如果每一列的内容打破了这条线，这种方法就会失败，即每个单元的内容应该足够短。以下为两个pure css解决方案的演示：V2...旧版本：V1回答过的其他问题你可以看看下面这个：
一、首先我们定义区块，在一个区块中，存储着一个时间戳和一个（可选的）索引。为了保证整个区块链的完整性，每个区块有一个标记自己身份的哈希值，像莱特币，每个区块的哈希值都是由一个密码学算法根据区块的索引、时间戳、数据以及前一个区块的哈希值生成的。区块的数据可以...... 把攻击的IP屏蔽了，然后提交工单举报IP看你的需求吧，正常1核2g就够了管局要求使用所在厂商的国内服务器需要在所在厂商备案才可以的，域名已经有备案号，指向腾讯云国内服务器，按照管局要求需要做转入备案，实际上就是在接入商里面添加上腾讯云的名字，这个不影响之前的备案信息，在转入过程中如果着急访问的话，通过初审就可以给开通临时访问的权限，初审是1个工作日，...... 接触风险之后可以继续申诉没什么差别的测控技术与仪器本科生扫描二维码扫描关注云+社区上下两个div，底部的div高度可调，上面div高度自适应，填满整个窗口，页面不出现滚动条_百度知道
上下两个div，底部的div高度可调，上面div高度自适应，填满整个窗口，页面不出现滚动条
上下两个div，下面的div高度可调，上面div高度自适应，以填满整个窗口，页面本身不能出现滚动条，但上面的div可根据其中的内容出现滚动条，整体感觉像一个聊天窗口，求html5+css代码。
我有更好的答案
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&&html xmlns=&&&&head&&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&&title&无标题文档&/title&&/head& &body&
&!DOCTYPE html&&html&&head&&style&
.all{border:2height:100%;} .one{border:2} .two{border:2 height:200}&/style&&script language=&javascript&&
window.onload=function() { var w=document.documentElement.clientW//可见区域宽度 var h=document.documentElement.clientH//可见区域高度 ss=document.getElementById('ha'); //alert(w); h = h-200; ss.style.height=h+&px&; }&/script&&/head&&body& &div class=&all&&
&div class=&one& id=&ha&&头部&/div&
&div class=&two&&底部&/div& &/div&&/body&&/html&&/body&&/html& 不知道你要的是不是这个效果
不能用script来计算高度，因为下面这个div的内容不能确定其高度是多少
那肯定要获得第2个DIV这个节点..通过class ,父节点..等等..得到节点对象,就能动态获得高度了啊..假设我知道class window.onload=function() { var w=document.documentElement.clientW//可见区域宽度 var h=document.documentElement.clientH//可见区域高度 ss=document.getElementById('ha'); //alert(w);var two_height = $(&.two&).css(&height&);//这里用的是jQuery的函数.引下jQuery工具包h = h-two_ ss.style.height=h+&px&; }
采纳率：100%
只用css，不使用js。IE高版本跟谷歌已测。&!DOCTYPE&html&&html&lang=&en&&&head&&&&&&meta&charset=&UTF-8&&&&&&&title&&/title&&&&&&style&&&&&&&&&body{&&&&&&&&&&&&margin:&0&padding:&0&&&&&&&&}&&&&&&&&div{&&&&&&&&&&&&width:&100%;&&&&&&&&}&&&&&&&&.top{&&&&&&&&&&&&height:&200background-color:&&&&&&&&&}&&&&&&&&.bottom{&&&&&&&&&&&&position:&&top:&200bottom:&0&background-color:&&&&&&&&&}&&&&&/style&&/head&&body&&div&class=&top&&&/div&&div&class=&bottom&&&/div&&/body&&/html&&阿西吧，对不住啊，看错题目了。我做的题目是上下两个div，上面200px；下面自适应高度。
第一感觉就是用框架可以实现，，好处是本身frame边线就可以拖动,根据百分比适应。但是框架是被淘汰的技术，不提倡使用！js+html也可以实现类似框架的效果，但是边框可移动怎么实现是问题，div和整个窗口的数据获取实现很容易！可以变通一下，在线面的div加个增大减小的按钮控件，js实现很简单，时间原因我没写这个功能&!DOCTYPE&html&&html&lang=&zh-CN&&&&&&&head&&&&&&&&&&meta&charset=&utf-8&&/&&&&&&&&&&meta&http-equiv=&X-UA-Complitable&&content=&IE=edge,chrome=1&&/&&&&&&&&&&meta&name=&renderer&&content=&webkit&&/&&&&&&/head&&&&&&body&&&&&&&&&&div&id=&wrapper&&&&&&&&&&&&&&&div&id=&top&&style=&width:100%;background:&&&/div&&&&&&&&&&&&&&div&id=&bottom&&style=&width:100%;background:&&&/div&&&&&&&&&&/div&&&&&&&&&&script&&&&&&&&&&&&&var&getblank&=&document.documentElement.clientHeight+&px&;&&&&&&&&&&&&var&topd&=&document.getElementById(&top&);&&&&&&&&&&&&var&bottomd&=&document.getElementById(&bottom&);&&&&&&&&&&&&var&w&=&document.getElementById(&wrapper&);&&&&&&&&&&&&w.style.height&=&getblank+&px&;&&&&&&&&&&&&topd.style.height&=&1/2*Number(getblank.split(&px&)[0])+&px&;&&&&&&&&&&&&bottomd.style.height&=&1/2*Number(getblank.split(&px&)[0])+&px&;&&&&&&&&&/script&&&&&&/body&&/html&
&div style=&overflow:&&&div style=&overflow-y:auto&&&/div&&div style=&&&这个DIV不用控制高度&/div&
上面的div高度设为auto，可以根据下面div的高度变化，但是一定要设置最大(max-height)和最小(min-height)高度，加上滚动条，下面的div也要设置最大最小高度，这样就可以了，但是如果说下面的高度是要用户在页面中调的话就要另外说了。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&&html xmlns=&&&&head&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&title&无标题文档&/title&&script type=&text/javascript& src=&jquery-1.8.3.min.js&&&/script&&script type=&text/javascript&&$(document).ready(function(){var one = $(&.one&).height(); var two = $(&.two&).height(); var thr = $(document.body).height();one = thr -$(&.one&).css('height',one);alert(one);}); &/script&&style&body,html{ height:100%; margin:0}p { margin:0; padding:0; color:#fff}.one {width:100%; background-color:#0C0; height: overflow:hidden}.two { position: width:100%; height: bottom:0 left:0 background-color:#000}&/style&&/head&&body&&div class=&one&&&p&1111&/p&&/div&&div class=&two&&&p&1111&/p&&p&1111&/p&&p&1111&/p&&p&1111&/p&&p&1111&/p&&/div&&/body&&/html&
其他7条回答
为您推荐：
其他类似问题
滚动条的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。当前位置：
(html5)div块滚动条如何独立于整个页面的滚动条？
(html5)div块滚动条如何独立于整个页面的滚动条？
来源：网络整理&&&&&时间: 4:33:27&&&&&关键词:滚动条,div
关于网友提出的“(html5)div块滚动条如何独立于整个页面的滚动条？
”问题疑问，本网通过在网上对“(html5)div块滚动条如何独立于整个页面的滚动条？
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：
问题：(html5)div块滚动条如何独立于整个页面的滚动条？
描述:如图：
左边是一个菜单导航条，右边是整块文章的内容（在写blog，文章内容是主要内容，左边菜单是弹出框）
在左边滚动条滚到底部时，继续滚动，整个页面的滚动条也会滚动。
如何滚动左边div块时，不影响整个页面的滚动条
谢谢~解决方案1:左边容器设置高度height: 100%，然后在设置overflow-y: scroll。
以上介绍了“(html5)div块滚动条如何独立于整个页面的滚动条？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/1332042.html
上一篇： 下一篇：为了账号安全，请及时绑定邮箱和手机
设置成自适应后，为什么会出现滚动条？
设置成自适应后，为什么会出现滚动条？
20是咋来的
滚动条的宽度
哦哦，长知识了，谢谢
写下你的评论...
只需要将HTML中的canvas中添加“style：width：100%；height：100%”，滚动条可以消失
在body里面的style添加取消滚动条overflow:hidden..祝你成功!!
写下你的评论...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11设置父容器的宽度为280px，设置子容器的宽度为300px，其中的20px作为滚动条的宽度，父容器设置overflow:则不会显示出超出容器的20px的滚动条，子容器设置
overflow-y:overflow-x:使其出现垂直滚动条。示例代码如下：
&!DOCTYPE&
&meta http-equiv="Content-Type" content="text/charset=UTF-8"/&
&title&test&/title&
&style type="text/css"&
padding: 0;
margin: 0;
html, body{
width: 100%;
height: 100%;
width: 280px;
height: 500px;
border: 1px solid;
overflow: hidden;
width: 300px;
overflow-y: auto;
overflow-x: hidden;
height: 500px;
&div id="div1"&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
&li&dsdsd&/li&
阅读(...) 评论()}