JS / CSS-保持td元素的宽度

Question

I have some thing like

<table>   
   <thead>
     <tr class="class1"><td>Col 11</td><td>Col 12</td><td>Col 13</td></tr>   //Row 1
     <tr class="class2"><td>Col 21</td><td>Col 22</td><td>Col 23</td></tr>   //Row 2 
   </thead>   
   <tbody>
     <tr><td>D 11</td><td>D 12</td><td>D 13</td></tr>
     <tr><td>D 21</td><td>D 22</td><td>D 23</td></tr>
     .
     .
     <tr><td>D n1</td><td>D n2</td><td>D n3</td></tr>   
   </tbody>
 </table>

I want to make Row 1 and Row 2 stick to the top of the page when there are more rows in the tbody which i am doing with the following script,

var c1 = $(".class1");
var c2 = $(".class2");
if(st > 315) {

    c1.css({
        position: "fixed",
        top: "110px"
    });
    c2.css({
        position: "fixed",
        top: "145px"
    });
} 
else {
    c1.css({
        position: "",
        top: "",

    });

    c2.css({
        position: "",
        top: "",

    });
}

When the two rows get to position:fixed the tboby contents get shrinked (as if thead and tbody are separate table elements)

I want the td to be fixed througout the process. How to fix this issue ? :(

Thanks in advance.

Answer 1

<td with="100px">...</td>

If you need position fix, use other element. TD cant be position fixed.