Question

这是我的情况：我有一个包含表格标题position: fixed的表格和一些表格正文行，其宽度设置为100%。

我试图在浏览器调整大小时使标题行正确调整大小，因此其单元格排列正文行单元格。

我将如何实现这一目标？（尝试使position: fixed元素对浏览器大小做出反应 - 动态更改

这是我的代码。一个非常简单的网页

<html>
<head>
<style>
    body{
        width:100%;
    }
    thead{
        position:fixed;     
        width:100%
        overflow:visible;
        align:center;
    }
    th{
        border:2px solid black;
            width:20%;
            text-align:center;
    }

    td{
        border:2px solid black;
        width:20%;
        text-align:center;
    }
    table{
        width:80%;
        margin:auto;
        margin-top:50px;
    }
    .empty{
        height:30px;
    }
    .empty td{
        border:none;
    }


</style>

</head>
<body>
    <table>
        <thead>
            <th>
                heading1;
            </th>
            <th>
                heading2;
            </th>
            <th>
                heading3;
            </th>
            <th>
                heading4;
            </th>
            <th>
                heading5;
            </th>
        <thead>
        <tbody>
            <tr class="empty">
                <td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td>
                    cell1;
                </td>
                <td>
                    cell2;
                </td>
                <td>
                    cell3;
                </td>
                <td>
                    cell4;
                </td>
                <td>
                    cell5;
                </td>
            </tr>
            <tr>
                <td>
                    cell1;
                </td>
                <td>
                    cell2;
                </td>
                <td>
                    cell3;
                </td>
                <td>
                    cell4;
                </td>
                <td>
                    cell5;
                </td>
            </tr>
        <tbody>
    </table>
</body>
</html>

我正在使用ASP.net开发一个网站工具。 ASP.net中的任何解决方案都将非常受欢迎。

Answer 1

表格元素与html中的其他元素不太灵活。显然＆＃39;位置：固定＆＃39;属性将使表忽略宽度规范。

因此我稍微调整了你的html和css，以便更好地将文档的部分分成标题和内容（部分）。

基本上，标题只包含表头。该部分将包含其中的所有表行和数据。滚动时，标题元素将保持固定，其中的表头单元格（与td单元格具有完全相同的css属性）将与各自的列完全对齐。

希望这会有所帮助，祝你好运。

＆＃13;

    body {
        width: 100%;
        margin: 0px;
    }

    header {
        width: 100%;
        position: fixed;
        margin-top: -30px;
    }

    section {
        width: 100%;
        margin-top: 50px;
    }

    table {
        width: 80%;
        margin: 0px auto;
    }

    header table th,
    section table td {
        width: 20%;
        text-align: center;
        border: 2px solid black;
    }

＆＃13;

    <header>
        <table>
            <thead>
                <th>heading1;</th>
                <th>heading2;</th>
                <th>heading3;</th>
                <th>heading4;</th>
                <th>heading5;</th>
            </thead>
        </table>
    </header>

    <section>
        <table>
            <tbody>
                <tr>
                    <td>cell1;</td>
                    <td>cell2;</td>
                    <td>cell3;</td>
                    <td>cell4;</td>
                    <td>cell5;</td>
                </tr>
                <tr>
                    <td>cell1;</td>
                    <td>cell2;</td>
                    <td>cell3;</td>
                    <td>cell4;</td>
                    <td>cell5;</td>
                </tr>
            </tbody>
        </table>
    </section>

＆＃13;

浏览器调整大小时CSS / HTML固定位置元素的大小调整

1 个答案: