and not match width of table

Question

If you look at all of my <th> tags in the <thead> tag in the table, you can see if each has its own class: col1, col2, col3, col4... col9 I also have a <thead> in the table.

Now everything in the css is fine for the table except for my table headings. The problem is that I have a scrolling table, because I have a scrolling table I don't want my table headings to scroll with the table. Because of that I need this #tableWrapper thead tr, the problem though with this is the width of the thead and the width of the table headings (th), they are not going as wide as the whole table (99%), it is going approximately about 60% of the way, now if I didn't have a thead I will be able to get the table headings to its correct size and go as wide as the table, but this means the table headings will scroll with the table so I need the thead. But the problem is that the <thead> and <th> is not going as wide as table, why is this.

Below is table code:

<div id="tableWrapper">
<div id="tableScroll">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="col1">Question No</th>
<th class="col2">Question</th>
<th class="col3">Option Type</th>
<th class="col4">Duration</th>
<th class="col5">Weight(%)</th>
<th class="col6">Answer</th>
<th class="col7">Video</th>
<th class="col8">Audio</th>
<th class="col9">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></td>
<td class="options"></td>
<td class="duration"></td>
<td class="weight"></td>
<td class="answer"></td>
<td class="video"></td>
<td class="audio"></td>
<td class="image"></td>
</tr>
</tbody>

Below is css;

            /*css for QandATable.php*/

            #qandatbl{ //table
                font-size:14px;
                border-collapse:collapse;
                text-align:center;
                margin-left:auto; 
                margin-right:auto;
                width:99%;
            }
            .col1{
            background-color:#FEFEF2;
            width:7%;
            border: 1px solid black;
            }
            .col2{
            background-color:#FCF6CF;
            width:16%;
            border: 1px solid black;    
            }   
            .col3{
            background-color:#FEFEF2; 
        width:7%;
            border: 1px solid black;
            }
            .col4{
            background-color:#FCF6CF;
        width:7%;
            border: 1px solid black;
            }

           .col5{
            background-color:#FEFEF2;
            width:7%;
            border: 1px solid black;
            }
            .col6{
            background-color:#FCF6CF;
            width:7%;
            border: 1px solid black;    
            }   
            .col7{
            background-color:#FEFEF2; 
        width:16%;
            border: 1px solid black;
            }
            .col8{
            background-color:#FCF6CF;
        width:16%;
            border: 1px solid black;
            }
                .col9{
            background-color:#FCF6CF;
        width:16%;
            border: 1px solid black;
            }

#tableWrapper {
  position:relative;
}
#tableScroll {
  height:300px;
  overflow:auto;  
  margin-top:20px;
}

#tableWrapper thead {
position:absolute;
top:-24px;
width:99%;
}`enter code here`

score 0 · Answer 1 · answered Nov 27 '11 at 19:11

0

This seems to work in IE 6+ and Firefox. Please let me know what others do or do not work:

http://spruce.flint.umich.edu/~jalarie/jaa_kee.htm

answered Nov 27 '11 at 19:11

James Alarie

21
1

score -2 · Answer 2 · edited May 23 '17 at 11:51

-2

From what I have seen you can't do this with just CSS.

HTML table with fixed headers?

HTML table with fixed headers and a fixed column?

There are a few solutions in those links above, but they all fall apart at some part (IE7, Safari and IE9 being the major culprits. If you really want this I would think about using javascript. There area number of jQuery plugins that can accomplish this.

edited May 23 '17 at 11:51

Community

1
1

answered Nov 27 '11 at 09:55

mrtsherman

39,342
23
87
111

@OfirFarchy - in my first link that website is listed as an answer. However, in comments you can see that there are major compatibility problems. Users say IE7, Safari, Opera and IE9 don't support it. – mrtsherman Nov 27 '11 at 10:19
My bad you are correct, I myself am a Linux user and in both chromium and Firefox this works... – Ofir Farchy Nov 27 '11 at 10:44
At imaputz.com/cssStuff/bigFourVersion.html. They are cheating as they set the width explizit. What if you want it to depend on the content width? – velop Oct 16 '13 at 12:28
I'm curious why I'm collecting downvotes when there are no other solutions to this question. If you can do it with CSS then post the answer and I'll gladly remove mine. In the meantime... my answer stays. Question is probably worth revisiting since old browsers can now be safely ignored. – mrtsherman Sep 23 '16 at 15:08

and not match width of table

2 Answers2