How do I freeze the first and last columns of an html table in a scrollable div?

Question

I have a table which has a header row, but also a header column and a total column with several columns in between.

Something like this:

Name    Scor         


        

Answer 1

It's not complete right now (I just mocked it up really quick), but here's a way of doing it using straight HTML. You want three tables ... two outside the

and one inside the

. All three are floated to the left, so that they're all on the same line.

Table Test

and the code itself:

  

     

        
Name
     
     

        
John
     
     

        
Will
     
  
  

      
           ...
        
           ...
        
           ...
        
           ...
        

        

           
Score1
           
Score2
        

           
5
           
6
        

           
3
           
7
        

           
7
           
1
      
  
  

     

        
Total
     
     

        
86
     
     

        
82
     
  

Note: The padding-bottom on the div is so that the scrollbar does not cover up the table in IE. Also, the bug I have to work out is how to specify the width of the header elements inside the middle table. For some reason, specifying the width="" attribute does not work. Thus, if the text of the header element is too wide (and breaks onto another line), then the layout is broken (off by one row)

0 讨论(0)

查看其它7个回答

发布评论:

提交评论

---

•  加载中...