关键词：
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*所有内容都在这个DIV内*/
.all {
width: 100%;
border: 1px solid #000000;
}
/*表头在这个DIV内*/
.title {
width: 500px; /*这个宽度需要与下面的内容的DIV相等*/
}
/*表格样式*/
table {
width: 100%; /*撑满上面定义的500像素*/
border: 1px solid #FF00FF;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
/*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/
table tr th {
border: 1px solid #FF00FF;
overflow: hidden; /*超出长度的内容不显示*/
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
white-space: nowrap;
}
/*单元格样式*/
table tr td {
border: 1px solid #FF00FF;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
}
/*容纳表格内容的DIV,这个DIV上放置滚动条*/
.content {
width: 100%;
height: 100px; /*定一下高度,要不然就撑出来没滚动条了*/
overflow: scroll; /*总是显示滚动条*/
}
/*真正存放内容的DIV*/
.content div {
width: 500px; /*与表头的DIV宽度相同*/
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<table>
<tr>
<th style="width:10%">Operate</th>
<th style="width:20%">Date</th>
<th style="width:25%">Acknowledge</th>
<th style="width:15%">Other1</th>
<th style="width:15%">Other2</th>
<th>Other3</th>
</tr>
</table>
</div>
<div class="content">
<div>
<table>
<tr>
<td style="width:10%">Operate</td>
<td style="width:20%">Date</td>
<td style="width:25%">Acknowledge</td>
<td style="width:15%">Other1</td>
<td style="width:15%">Other2</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other21</td>
<td>Other22</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other31</td>
<td>Other32</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other41</td>
<td>Other42</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>2011-12-12 12:22:34 9987</td>
<td>Acknowledge</td>
<td>Other51</td>
<td>Other52</td>
<!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个-->
<td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
自定义表格固定表头，随着表格内容增加出现滚动条
1、首先要固定表头就必须是两个表格组合在一起2、用一个div把两个表格包在一起，并且设置宽度，在让它可以横向滚动，overflow-x:auto3、在设置里面两个table的宽度为一样，在设置内容表格overflow-x:hidden;overflow-y:auto<!--表格表头... 查看详情
Flexbox 类型的固定表头，表格标记的可滚动内容
】Flexbox类型的固定表头，表格标记的可滚动内容【英文标题】：Flexboxtypefixedheader,scrollablecontentfortablemarkup【发布时间】：2018-05-2523:31:32【问题描述】：我正在使用一个使用传统表标记的数据表，但我想要的是我的表从页面中的... 查看详情
antdvuetable滚动页面固定表头
页面滚动固定表头思路由于直接去控制antdtable的头部置顶会导致头部样式丢失，每列去获取宽度设置感觉太麻烦，最后决定使用两个table，一个只做表头固定使用，不赋予数据。具体做法时，将传入的属于都付给两个table，隐藏... 查看详情
elementuitable首行固定
...头下，数据多时其他行可以纵向滚动 方案一 两个表格拼凑第一个表格展示头部和固定行第二个表格展示其它数据示意图如下 适用场景：仅横向纵向均无滚动条时可用若有横向滚动条，两个表格的滚动条是分开的，会... 查看详情
table表格固定表头和第一列内容可滚动(代码片段)
整理了下：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><metacharset="utf-8"/><styletype="text/css">*margin:0;padding:0;tablewidth:100%;text-align:center;border-collapse:collapse;bo... 查看详情
修复了带有动态内容的表头？
...标题的解决方案，但它们都不能解决我的问题。我有一个表格，样式为jQuerymobile（响应式表格）。此表由.append动态填充。列没有固定的宽度，它们会有所不同。有没有办法修复表格的标题，这样我就可以滚动表格主体，标题始... 查看详情
table固定表头固定列实现横向纵向滚动
...实现表头固定，body滚动，所以把thead单独提出来作为一个表格，然后用定位的方式并成一个完整的表格。sticky是position的新属性值，叫黏性定位。它是一个在static和fixed变化的属性，当你的内容位置没有超过容器范围时，它是正... 查看详情
html固定表头，表单内容垂直循环滚动
<!DOCTYPEhtml><htmllang="zh-cn"><head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <me 查看详情
实现固定表头和表列的table组件
...列，这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时支持固定表头和左右两列设计思路这里从普通表格、固定表头、固定表列、同时固定表头表列逐步迭代 查看详情
table实现表头固定内容滚动
<divstyle="width:800px;"><divclass="table-head"><table><colgroup><colstyle="width:80px;"/><col/></colgroup><thead><tr><th>序号</th><t 查看详情
固定位置表头延伸到屏幕外
...个长表，我想在粘性标题下方滚动。我创建了一个单独的表格，只是为了标题，在我添加任何固定位置的样式之前，一切都很好。当我放置位置固定时，标题会粘住但它会延伸到屏幕外（可能是由于 查看详情
滚动表格固定表头和左边栏
效果如下：思路： 在表格外面套一个相对定位标签， 在该标签内再复制两个绝对定位的表格，一个作为固定头部，一个作为固定左边栏， 再在该标签内添加一个放在左上角的标签，宽高与第一个td相同 当表格滚... 查看详情
带有滚动正文的引导固定表头
...些列。随着更多数据的添加，我需要能够垂直和水平滚动表格内容。这在没有滚动条的情况下工作正常，因为引导程序为我解决了这个问题。当我将表格设置为“显 查看详情
css固定表头，表单内容可以滑动
<html><head> <metacharset="utf-8"> <title>Table</title> <styletype="text/css"> 查看详情
bootstraptable可以固定表头吗
参考技术A在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap3，故也可以叫做bootstraptable。需要实现的是：表格头部固定，并且支持水平滚动htmlcode(sourcetable):复制代码<tableid=&... 查看详情
css手写一个表头固定(代码片段)
Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定主要遇到的个问题就是固定以... 查看详情
elementui组件表格高度以及表头固定表身滚动方法
1.表格高度：在el-table标签里增加一个类名classA,然后写css样式：.classAth,.classAtdpadding:0!important;height:20px;//需要的高度line-height:20px;2.表头固定，表身超过高度自动滚动直接在el-table标签里增加height:100%就可以了。 查看详情
layuitable表格出现表头和内容不对齐问题解决方法
在使用layui开发中，表格如出现滚动条，表头和表内容不对齐的问题，是因为滚动条的宽度影响到了。因为滚动条有单独的补丁列，把源码lay/modules/table.js845行注释o=function(e){//if(a&&l){//滚动条导致列和头不对齐问题if(a){if(((e... 查看详情