`
fireinjava
  • 浏览: 480550 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

两个table合并成一个table 标题列不滚动

    博客分类:
  • html
CSS 
阅读更多

原理:style="margin-top:-2"避免两个table的border叠加效果。

 

<style type="text/css">
	td{
			border:1px black solid; 
			text-align:center;
		}   
</style> 
  
  两个table显示成一个table效果,标题列不滚动:<BR>
	 <table border="1" cellspacing="0" width="500px" style="border-color:black;" >  
        <tr><td width="20%">标题1</td><td width="20%">标题2</td><td width="20%">标题3</td><td width="20%">标题4</td></tr>  
    </table>    
	<div id="tb" style="height:100px;overflow-y:scroll;display:block;margin-top:-2;">
  	<table border="1" cellspacing="0" width="500px" style="border-color:black;" >  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
    </table>   
	</div>

 

 

1
2
分享到:
评论

相关推荐

    word合并,多个word合并成一个

    将多个word路径下的word合并成一个word 第一个路径合并后在第一个位置,最后一个路径合并后在最后

    el-table合并列 合并单元格

    el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。

    table合并单元格的多种方法

    在表格(Table)设计中,有时我们需要合并单元格来达到特定的展示效果,例如创建标题行或列,或者为了美观和布局对齐。在HTML、CSS以及JavaScript中,都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...

    vue-easytable合并单元格

    在这个“vue-easytable合并单元格”的主题下,我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中,合并单元格通常使用`&lt;td&gt;`的`colspan`和`rowspan`属性来完成,但在Vue Easytable...

    layui table合并单元格.zip

    layui提供了`colspan`和`rowspan`属性来设置单元格的跨越列数和行数,我们可以通过设置这两个属性来实现合并。 另外,"2layui数据表格跨行自动合并 - 合并行.url" 和 "3layui 动态表格之合并单元格 - 合并列.url" ...

    table表格按列合并相同数据行单元格代码

    在jsp、html页面中实现table表格按列合并相同数据行单元格代码,可实现功能为:在一个table表格中,合并指定列中所有相同数据相邻行单元格内容。

    jquery table 合并相同列

    标题“jquery table 合并相同列”所提及的问题正是关于如何利用 jQuery 来实现这一功能。 首先,理解需求:在表格中,如果相邻的列(column)内容相同,我们将其合并成一个单元格,只显示一次内容,这样可以使表格...

    Table固定指定列进行横向滚动(可拓展)

    标题“Table固定指定列进行横向滚动(可拓展)”就描述了这样一个解决方案。 在这个解决方案中,我们有两个关键文件:`Index.html` 和 `Index.js`。`Index.html` 是页面的结构,它包含了一个表格元素,并且可能已经...

    bootstrap表格列合并

    对于上述例子,我们需要在第一行的第二个`&lt;td&gt;`之后插入一个合并的单元格,覆盖接下来的三个列。 ```html 标题1 合并后的标题&lt;/th&gt; &lt;!-- 这里覆盖了原标题2、3、4 --&gt; 数据1 合并后的数据&lt;/td&gt; &lt;!-- ...

    LayUiTable表单相同参数的单元格合并

    在IT领域,尤其是在前端开发中,LayUI是一个广受欢迎的轻量级前端框架,它提供了丰富的组件,如表格(Table)、按钮、表单等,用于构建用户界面。本话题聚焦于LayUI中的Table组件,特别是如何实现相同参数的单元格...

    合并table的行

    1. **多列合并**:除了基于单列进行合并外,还可以根据多列的组合值来决定行的合并,这需要对代码进行相应的调整,可能涉及到更复杂的比较逻辑。 2. **性能优化**:在处理大数据量时,直接在UI层进行行合并可能会...

    Matlab GUI工具-多个Excel文件合并成一个文件,且去重处理

    本教程将围绕“Matlab GUI工具-多个Excel文件合并成一个文件,且去重处理”这一主题展开,旨在帮助你利用MATLAB的GUI功能高效地整合和清洗数据。 首先,我们理解标题中的关键概念。"多个Excel文件合并"意味着我们...

    element-ui表格el-table动态合并单元格(合并行和列)以及给表头添加斜线

    实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列

    el-table无限滚动+控制列是否显示+列排序(非json)

    比较函数接收两个参数(通常是数组中的两个元素),并返回一个负数、零或正数,表示第一个参数小于、等于或大于第二个参数。 以下是一个简单的示例: ```html &lt;el-table :data="tableData" lazy :load=...

    html的table滚动时固定首行和首列

    html的table滚动时固定首行和首例,网上多为3个table拼合实现,现使用一个table实现

    分享一个首行表头和最左列和最右列固定中间滚动的html table样式

    一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列...

    javascript万能table合并单元格,隐藏列 html版

    - **列判断**:内层循环遍历每一行中的所有单元格 (`table.rows[i].cells.length`),并判断是否需要对当前列执行合并操作(示例中仅对前四列执行合并操作)。 - **合并逻辑**:如果发现相邻两行的单元格内容相同,则...

    JS实现动态修改table及合并单元格的方法示例

    在示例中,虽然没有直接使用`rowSpan`和`colSpan`,但可以看到注释中有尝试设置这两个属性的代码。例如,`tabObj.rows[0].cells[2].rowSpan=2`会让第一行的第三个单元格跨越两行。 在实际应用中,可能还需要考虑更...

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    在原版的 `bootstrap-table-fixed-columns` 插件中,可能会遇到一些问题,如冻结列后排序功能失效、列宽显示不正确以及无法正常合并行。这些问题对于表格的正常使用和美观性都是不利的。描述中的内容表明,我们已经...

    13-Hive基本操作1

    例如,`CREATE TABLE my_table (col1 string, col2 int)`将创建一个名为my_table的表,包含两列col1和col2。 5. **修改表**: 使用`ALTER TABLE`可以修改已存在的表结构,比如添加、删除或更改列。 6. **删除表**...

Global site tag (gtag.js) - Google Analytics