瀏覽器調整大小時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固定位置元素調整大小

回答

相關問題