CSS/HTML fixed position element resizing when browser resizing
Question
This is my situation: I have a table with table header position: fixed and a couple of table body rows with their width set to 100% .
I am trying to make the header row resize properly when browser resizes, so its cells lines up body row cells.
How am I going to achieve that? (trying to make a position: fixed element react to browser size-change dynamically)
Here is my code. A very simple webpage
<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>
I'm developing a website tool using ASP.net currently. Any solution in ASP.net will be much appreciated.
1 answers
solution1
0 2016-03-10 22:45:18
The table element is not quite flexible as other in the html. Aparently the 'position:fixed' property will make the table ignore the width specification.
Therefore I tweaked your html and css a bit, in order to better divide the document's parts into header and content (section).
Basically, the header will contain only the table head. The section will contain all the table rows and data in it. When scrolling, the header element will remain fixed and the table head cells in it (which has been given the exact same css attributes as the td cells) will remain perfectly aligned with their respective columns.
Hope this helps, good luck.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.