CSS - 是否可以维护标头属性,即使它有一个固定的位置



这里有一个简单的表代码。

这是它的jsfiddle代码-jsfiddle链接

问题是,当head得到position : fixed时,它只是失去了table-的所有属性,例如整个宽度、每个单元宽度。

所以我很乐意知道的是,有没有办法解决它?

感谢的任何帮助

<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>

请尝试使用以下css

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

如果位置是固定的,它会自动获得宽度,如果你为第个设置宽度,那么它似乎是正确的。

更新css

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

相关内容

最新更新