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

-1

这是我的情况：我有一个表格标题为position: fixed的表格和几个表格行宽度设置为100%。浏览器调整大小时CSS/HTML固定位置元素调整大小

我想在浏览器调整大小时正确调整页眉行大小，以便它的单元格排列正文行单元格。

我该怎么做到这一点？（试图使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解决方案将非常感激。

来源

2016-03-10 user6045475

'对齐：中心;'被弃用。 – Roy

表格标题位置是否有固定的原因？你是否希望它有一个固定的标题，以便可以滚动表格的其余部分？ –

也许这会有所帮助：https://jsfiddle.net/dPixie/byB9d/3/light/ –

表格元素与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>

来源

2016-03-10 22:45:18 mformigo

谢谢。这似乎是解决问题的一个体面的方法。 – user6045475

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

回答

相关问题