CSS - Is it possible to maintain header properties even if it's got a fixed position

Question

Here's a simple table code.

Here's is the jsfiddle code for it - JSFiddle Link

The thing is that when the head gets a position : fixed it simply lose all the properties of the table- such as the whole width, each cell width.

So the thing I would be happy to know is if there's any way to fix it?

Thanks for any kind of help

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    
        <style>
            table {
            width: 100%;
            }
    
            th td {
             width:25%;
            }
    
            thead {
            background-color: #f00;
            position: fixed;
            }
    
        </style>
    
    
    </head>
    <body>
    
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                </tr>
            </thead>
    
            <tbody>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>
    
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>
    
    
            </tbody>
    
        </table>
    
    
    </body>
    </html>

@GibboK he wants it to be same as the table header without a positon:fixed — m0bi5, Feb 19 '15 at 11:29
Well I would like to the header will have a positon:fixed but also that it will still be above the right column — PESfcs, Feb 19 '15 at 11:32

score 1 · Answer 1 · answered Feb 19 '15 at 11:43

1

Please try with the following css

thead > tr> th {width: 330px;}

If the position is fixed it gets auto width, if you set width for the th then it seems to be correct.

answered Feb 19 '15 at 11:43

Jagadeesh

734
6
26

score 0 · Answer 2 · answered Feb 20 '15 at 08:56

Update css

        table {
        width: 100%;
        }

        th td {
         width:25%;
        }

        thead {
        background-color: #f00;
        position: fixed;
    width: 100%;
          left: 0;
          right: 0;
        }
thead th{width: 2000px}

CSS - Is it possible to maintain header properties even if it's got a fixed position

2 Answers2