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

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

table 元素不像 html 中的其他元素那样灵活。 显然，'position:fixed' 属性将使表格忽略宽度规范。

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

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

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

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

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

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

问题描述

1 个解决方案

解决方案1
0 2016-03-10 22:45:18

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

问题描述

1 个解决方案

解决方案1 0 2016-03-10 22:45:18

解决方案1
0 2016-03-10 22:45:18