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

WBOY
Release: 2016-06-24 11:51:40
Original
1222 people have browsed it

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
    58. ="checkbox5" value="checkbox">
    59. e
    60. Cell 2 Cell 3
    61. Cell 4 Cell 5
    62. f
    63. Cell 2
    64. Cell 3
    65. Cell 4
    66. Cell 5
    67. Cell 5
    68. g
    69. Cell 2
    70. Cell 3
    71. Cell 4
    72. 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.








  • source:php.cn
    Statement of this Website
    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
    Popular Recommendations
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!