search

Home >Web Front-end >HTML Tutorial >css controls fixed header, compatible with row and column merging_html/css_WEB-ITnose

css controls fixed header, compatible with row and column merging_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:401256browse

The report table design designed in the project has relatively too many columns. When dragging the scroll bar below, it cannot correspond to the column corresponding to the table header, so I searched online for a long time, and finally I found some reference materials on the Internet, and then summarized a fixed header demo that is compatible with row and column merging.

Multiple browsers have not done much testing, and it has been tested in ie6.

I have been waiting for this function for a long time and finally found a solution today. I have summarized it in javaeye for easy reference in the future. There may be better implementation methods. I hope some experts will pass by and leave me some better implementation examples for future communication.

The following is the relevant css

Html code

  1. >
    2. Html code

    1. 利用CSS代码让Table产生固定表头

        
    2.   
    3.   
    4.       
    5.   
    6.      
    7.   列头  
    8.   列头  
    9.   列头  
    10.   
    11.   
    12.   h1  
    13.   h2  
    14.   h3  
    15.   h4  
    16.   h5  
    17.   
    18.   
    19.   
    20.     
    21.       
    22.     a  
    23.   单元格2  
    24.   单元格3  
    25.   单元格4  
    26.   单元格5  
    27.   单元格5  
    28.   
    29.   
    30.     
    31.       
    32.     b  
    33.   单元格2  
    34.   单元格3  
    35.   单元格4  
    36.   单元格5  
    37.   单元格5  
    38.   
    39.   
    40.     
    41.       
    42.     c  
    43.   单元格2  
    44.   单元格3  
    45.   单元格4  
    46.   单元格5  
    47.   单元格5  
    48.   
    49.   
    50.     
    51.       
    52.     d  
    53.   单元格2  
    54.   单元格3  
    55. Cell 4
    56. Cell 5
    57. Cell 5
    59. ="checkbox5" value="checkbox">
    60. e
    61. Cell 2 Cell 3
    62. Cell 4 Cell 5
    65. f
    66. Cell 2
    67. Cell 3
    68. Cell 4
    69. Cell 5
    70. Cell 5
    75. g
    76. Cell 2
    77. Cell 3
    78. Cell 4
    80. Cell 5
  • In addition, if the last row is merged in the table header, there will be problems with typesetting. Since there are only two lines merged above, the style has not been changed. If you want to deal with it, the temporary solution is not to merge the last line of rowspan and display it in multiple lines. This is a bit far-fetched, but I can't find a solution. A similar situation is as shown below:
  • I found some information for reference:
  • http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx
    • The article also said that there is no way to solve the above problem, leaving it to be better solved in the future.









    • Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Implement single file upload and partial page refresh_html/css_WEB-ITnoseNext article：Implement single file upload and partial page refresh_html/css_WEB-ITnose

    Related articles

    See more