在不更改html的情况下制作第一行的固定标题 [英] make fixed header of first row without changing html

问题描述

 <  表  id    tableAppointment"    bgcolor   =" #fcfcfc" 边框   1"  cellspacing   ="    宽度  ="  100％" > 

        <   tr  > 
            <   td     ="   csstextheader" 宽度   70px" >  <  /td  > 
            <   td     ="   csstextheader" 宽度   70px" > 
                <   b  > 时间段& nbsp; <  /b  > 
            <  /td  > 
            <   td  >  <   b  > 房间7 <  /b  >  /td  <   td  >  <   b  >  Room 8 <  /b  >  /td  <   td  >  <   b  > 房间9 <  /b  >  /td  <   td  >  <   b  > 房间10 <  /b  >  /td  <  /tr  > 



        <   tr     ="   csstablelisttd" <   td     ="   70px" <  > 
            <   td  >  00 <  /td  > 
            <   td     ="   csstdred" <  > 
            <   td  >  & nbsp;  <  /td  > 
            <   td  >  & nbsp;  <  /td  > 
            <   td  >  & nbsp;  <  /td  > 
        <  /tr  > 
<  /table  >  

我必须在不更改当前html的情况下固定第一行的标题.我向第一行的每个单元格添加了style ="position:fixed".但没有得到输出..

解决方案

首次尝试
因此，我在网上看到的第一个选项是添加"overflow-y:自动；显示:阻止；高度:330像素；"到tbody标签.我看到可以在其中使用单列的地方，但是在多列的地方，标题被推到右侧，而表行被推到左侧.我玩了一段时间，但从未使它起作用.


解决方案
虽然没有我想要的那么优雅，但此解决方案确实有效.当然，如果隔离标头，然后将数据行与y溢出的东西包装在div中，那将起作用.但是，数据网格会自动填充标头.您可以构建另一个datagrid并将其弄乱，但是jQuery很快解决了这个问题.这是计划:

•添加一个位置，将标题移到表外，并在其中使用溢出y的行
•移动标题
•重新对齐列
新标记
这是很基本的.我在其中包含数据的表之前添加了一个表.这将保留标题.我还设置了div样式以允许滚动.


<  表    ="   MyHeader" <   > 

<   div     ="   overflow-y:auto; height:330px;" > 

  <  表    ="   MyDataRows" <   thead  > 
      <   tr     ="   grid_header" <   th  >  Col1 <  /th  > 
        <   th  >  Col2 <  /th  > 
        <   th  >  Col3 <  /th  > 
      <  /tr  > 
    <  /thead  > 

    <  正文 > 
      <   tr  > 
        <   td  > 数据<  /td  > 
        <   td  > 数据<  /td  > 
        <   td  > 数据<  /td  > 
      <  /tr  > 
    <  /tbody  > 
  <  /table  > 

<  /div  > 
jQuery代码

<  脚本    ="  文本/javascript" <！[CDATA [  

(function(){ /*将表格标题从datagrid移到外面，因此它不会滚动"*/

("#MyHeader).append(

<table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">

        <tr>
            <td class="csstextheader" width="70px"></td>
            <td class="csstextheader" width="70px">
                <b>Time Slot&nbsp;</b>
            </td>
            <td><b>Room 7</b></td>
            <td><b>Room 8</b></td>
            <td><b>Room 9</b></td>
            <td><b>Room 10</b></td>
        </tr>



        <tr class="csstablelisttd">
            <td width="70px">08:00AM</td>
            <td>00</td>
            <td class="csstdred">John</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
</table>

I have to make fixed header of first row without changing current html.. I m adding style="position:fixed" to every cell of first row. but not getting output ..How it possible

解决方案

First Attempt
So, the first option I saw online was to add "overflow-y: auto; display: block; height: 330px;" to the tbody tag. I saw somewhere where this could work with a single column, but with multiple columns, the header is pushed to the right, and the table rows are pushed to the left. I played with this awhile, but never could get it to work.


Solution
While not as elegant as I would like, this solution does work. Of course, if you isolate the header and then wrap the data rows in a div with the overflow-y stuff, that would work. However, a datagrid populates the header automatically. You could build another datagrid and mess with that, but jQuery quickly solves the issue. Here’s the plan:

•Add a place for the header to be moved outside of the table with the rows where the overflow-y will be used
•Move the header
•Realign the columns
New Markup
This is pretty basic.  I added a table just before the table with data in it.  This will hold the header.  I also styled the div to allow for scrolling.


<table id="MyHeader"></table>

<div style="overflow-y: auto; height: 330px;">

  <table id="MyDataRows">

    <thead>
      <tr class="grid_header">
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>

</div>
jQuery Code

<script type="text/javascript">// <![CDATA[

(function () { /* move the table header from the datagrid outside, so it doesn't scroll" */

("#MyHeader").append(

这篇关于在不更改html的情况下制作第一行的固定标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！