`

Table列头固定,数据行与列头对齐方法

 
阅读更多
<style   type="text/css">  
  .td_relative  
  {  
          background-color:  #CCCCCC;  
          top: expression(document.getElementById("dv").scrollTop);  
          position : relative;  
          z-index : 1  
  }  
  </style>


<div class="tablebgcolor" id="dv" align=center style="border: 1 solid #000080 ;height:300;
width: 80%; overflow: auto; ">

  <TABLE align="center" border="1" cellspacing="0" width="100%" cellpadding="0" class="tablebgcolor" >
<TR bgcolor=#e2e2e2 class="text" >
<td class="td_relative"  valign="top" align="left">
                    序列
              </td>
              <td class="td_relative"  valign="top" align="left">
                    市场代码
              </td>
              <td class="td_relative"  valign="top" align="left">
                    市场描述
              </td> 
              <td class="td_relative" valign="top" align="left">
                    所属国家代码
              </td>
              <td class="td_relative" valign="top" align="left">
                    有效性(Y/N)
              </td>  
              <td class="td_relative"  valign="top" align="left">
                    创建时间      
              </td>  
        </TR>

            </td>
           
            <td width="20%"  valign="top" align="left" class="text">
                <%=marketDec %>&nbsp;
            </td> 
            <td width="20%"  valign="top" align="left" class="text">
                <%=conName %>&nbsp;
            </td>
            <td width="15%"  valign="top" align="left" class="text">
                <%=valid %>&nbsp;
            </td>  
            <td width="20%"  valign="top" align="left" class="text">
                <%=rec_time %>&nbsp;
            </td>
           
  </tr>
</TABLE>
分享到:
评论

相关推荐

    Boostrap table 列头和内容不对齐问题,终极解决方案

    然而,在实际应用中,我们可能会遇到一个常见的问题:表格的列头(thead)与内容(tbody)在对齐上出现问题,这会严重影响用户体验。本文将深入探讨这个问题的原因,并提供一个终极解决方案。 列头与内容不对齐的...

    实现Table表头和列固定

    "实现Table表头和列固定"的目标就是解决这一问题,保持表头在滚动时始终显示,同时支持多表头和多列固定,确保布局清晰,无错位。 首先,我们需要理解HTML中的`&lt;table&gt;`元素是用于创建表格的基本结构。它由`&lt;thead&gt;...

    固定列头表头ListScroll

    【固定列头表头ListScroll】是一种在Android开发中实现的高级UI组件,它结合了ListView和ScrollView的优点,主要用于展示大量数据并具有横向滚动和纵向滚动功能的表格。这种组件通常用于显示复杂的数据结构,例如...

    html Table 表头固定的实现

    首先,我们需要为表头定义一个CSS类,比如这里的.table-head,然后为其设置固定的高度和背景颜色,确保它在视觉上与表格主体(.table-body)有所区分。重要的是,给这个表头添加一个合适的padding-right样式。这个...

    asp.net html+table固定表头和左侧列.rar

    可以创建一个包含左侧列的独立表格或div,设置其position为fixed,然后调整宽度和高度,使其与原始表格对齐。这种方法可以确保当用户滚动水平方向时,左侧列依然可见。 在ASP.NET环境中,尽管HTML和CSS是前端技术,...

    datagrid 4种解决table对齐

    标题"datagrid 4种解决table对齐"和描述"datagrid 4种解决方案 表头与列对齐"正是针对这一问题提出的不同解决策略。下面我们将详细探讨这四种方法。 1. CSS样式调整: CSS是控制网页样式的核心工具,对于`Datagrid...

    table固定表头和指定列

    总的来说,实现"table固定表头和指定列"的功能,需要掌握CSS布局技巧、JavaScript事件处理以及可能的兼容性和性能优化知识。通过学习提供的压缩包文件,你可以深入理解并实践这些技术,提升你的前端开发能力。

    锁定表头和固定列(Fixed table head and columns)

    实现方法与表头锁定类似,但可能需要更复杂的布局和JavaScript处理,尤其是当表格行数较多时,需要确保固定列与可滚动部分的同步。 在HTML文件中,通常会有一个包含表头的`&lt;thead&gt;`元素和一个包含主体数据的`...

    基于jquery的固定html table表头/列头插件

    总结来说,"jquery.fixedtable.js"是一个实用的jQuery插件,旨在提升网页中大型表格的用户体验,通过固定表头和列头,使得数据浏览更加方便。它具有良好的浏览器兼容性,且易于集成到现有项目中。开发者可以根据自身...

    HTML固定Table标题行的四种方法

    这种方法需要处理滚动条宽度,以确保标题行与表格内容对齐。 ```javascript window.addEventListener('scroll', function() { var table = document.getElementById('myTable'); if (window.pageYOffset &gt; ...

    bootstrap-table实现表头固定以及列固定的方法示例

    这样即使用户滚动页面查看表格内容时,固定的表头或列依然可见,方便用户快速识别数据所在的列和行。 首先,要使用bootstrap-table实现表头固定以及列固定的功能,需要引入对应的JavaScript和CSS文件。这包括jQuery...

    table内容出现滚动条和表头对齐问题

    在网页设计中,表格(Table)是一种常见的数据展示方式,特别是在处理大量结构化信息时。然而,当表格内容过多导致无法在单个视窗内完全显示时,滚动条就会出现,这时表头对齐问题就显得尤为重要。为了解决"table...

    bootstrap table列和表头对不齐的解决方法

    在实际使用中,可能会遇到列和表头对不齐的问题,尤其是在设置了固定表格高度并出现滚动条的情况下。这种问题通常是由于数据列中的滚动条占据了额外的宽度,导致表头和数据列的div容器宽度不一致。 要解决Bootstrap...

    JavaScript:固定table的表头

    同时,可能需要处理表头的宽度,确保其与数据列对齐。 6. **兼容性处理**:不同的浏览器可能对某些CSS属性和JavaScript方法的实现有所不同,因此需要进行兼容性检查,确保在各种浏览器环境下都能正常工作。 7. **...

    JS固定表头及左边列

    当表格内容过多需要滚动时,表头固定在顶部可以使用户在查看任何行数据时都能清楚地知道列的含义。在原生JS中,可以使用元素的`position`属性来实现这一效果。将表头的CSS定位设置为`fixed`,并设定合适的宽度和高度...

    冻结(固定) 行或列 完整例子

    在网页设计中,冻结(固定)行或列是一种常见的需求,尤其在处理大型数据表时,用户滚动查看数据时,需要保持表头或特定列不动,以便于参照。本示例提供两个独立的完整实例,涵盖了如何使用jsp、js和css来实现这一...

    table表头及表头列锁定

    在IT行业中,尤其是在网页开发和数据展示领域,"table表头及表头列锁定"是一项重要的技术需求。它主要用于创建动态、长数据量的表格,使得用户在滚动查看大量数据时,表头始终保持可见,方便用户理解每一列数据的...

    HTML表格固定第一行第一列效果

    为了解决这个问题,我们可以实现一个类似于Excel的功能,即在滚动时固定表格的第一行和第一列,使得在浏览大量数据时,关键的列名和行标识始终可见。以下将详细介绍如何实现这个效果。 首先,我们需要创建一个基本...

    固定Table行列滚动.zip

    在实际应用中,可能还需要处理单元格的对齐问题,确保固定行列与其他部分的边界对齐。此外,考虑到响应式设计,我们需要确保在不同设备和窗口尺寸下,固定行列仍然能够正常工作。 对于压缩包中的 "Table固定行列...

    table固定表头,css控制

    在网页设计中,固定表头是一项常见的需求,特别是在处理大量数据时,用户需要在滚动查看内容时保持表头可见,以便清楚地了解列对应的数据。本文将深入探讨如何使用CSS来实现这一功能,并通过分析提供的两个示例文件...

Global site tag (gtag.js) - Google Analytics