1
我用兩個部分創建了html：fixed div（header）和long table below。我將表頭固定，因爲必須始終將表頭保持在最前面，因爲表格有很多列。當頁面滾動時，它們就像Excel電子表格一樣凍結 - 表頭始終位於頂部，表格在標題下滾動。一切正常，直到我調整窗口大小。該表相對於標題水平滾動，但標題不滾動，因此表中標題和列的列名不再匹配。我的問題是，是否可以創建一個水平滾動但不垂直滾動的固定div？創建一個水平滾動但不垂直的固定div
下面是我的HTML：
<!DOCTYPE html>
<head>
<title>Text</title>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>
<div id="nav_menu">
<img id="SctnImage" src="ub.png">
<p id="TileFistLine">Text</p>
<p id="TileSecLine">Text</p>
<table id="TblHead">
<col width="90">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="45">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="45">
<col width="45">
<col width="42">
<col width="42">
<col width="40">
<tr>
<td rowspan="2" id="C1">Designation <br> Click to download CAD</td>
<td rowspan="2" id="C2">Mass<br> kg/m</td>
<td rowspan="2" id="C3">Depth<br> h, mm</td>
<td rowspan="2" id="C4">Width<br> b, mm</td>
<td rowspan="2" id="C5">Web<br> s, mm</td>
<td rowspan="2" id="C6">Flange<br> t, mm</td>
<td rowspan="2" id="C7">Root Radius<br> r, mm</td>
<td rowspan="2" id="C8">Between fillets<br> d, mm</td>
<td colspan="2" id="C9">Local Buckling Ratios</td>
<td colspan="2" id="C10">Second Moment of Area</td>
<td colspan="2" id="C11">Radius of Gyration</td>
<td colspan="2" id="C12">Elastic Modulus</td>
<td colspan="2" id="C13">Plastic Modulus</td>
<td rowspan="2" id="C14">Buckling Param.<br> u</td>
<td rowspan="2" id="C15">Torsional Index<br>x</td>
<td rowspan="2" id="C15">Warping Const.<br> H, dm<sup>6</sup></td>
<td rowspan="2" id="C16">Torsional Const.<br> J, cm<sup>4</sup></td>
<td rowspan="2"id="C17">Area<br> A, cm<sup>2</sup></tp>
</tr>
<tr>
<td id="C11">b/2t</td>
<td id="C21">d/s</td>
<td id="C31">I<sub>x</sub>, cm<sup>4</sup></td>
<td id="C41">I<sub>y</sub>, cm<sup>4</sup></td>
<td id="C51">r<sub>x</sub>, cm</td>
<td id="C61">r<sub>y</sub>, cm</td>
<td id="C71">Z<sub>x</sub>, cm<sup>3</sup></td>
<td id="C81">Z<sub>y</sub>, cm<sup>3</sup></td>
<td id="C91">S<sub>x</sub>, cm<sup>3</sup></td>
<td id="C101"S<sub>y</sub>, cm<sup>3</sup></td>
</tr>
</table>
</div>
<div id="DataDiv">
<table id="DataTable">
<col width="90">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="45">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="40">
<col width="45">
<col width="45">
<col width="42">
<col width="42">
<col width="40">
<?php
$dbconnection=mysqli_connect("localhost:3306", "root", "root", "sections");
$myquery="SELECT * FROM sections.ub";
$queryresults=mysqli_query($dbconnection, $myquery);
$tableraws=mysqli_num_rows($queryresults); // gets raws number from table
for ($i=1; $i<=$tableraws; $i++) {
$myrow=mysqli_fetch_row($queryresults);
echo "<tr class='DataRows'>";
echo "<td class='DesignCell'><button type='button' class='DownButt'>".$myrow[1]."</button></td>";
for ($k=2; $k<=23; $k++){
echo '<td>'.$myrow[$k].'</td>';
}
echo "</tr>";
}
?>
</table>
<div id="tail"></div>
<?php readfile("bottom_navi.html"); ?>
</div>
</body>
而且CSS.css：
*{
font-family:arial;
font-size:10px;
}
#DataDiv {
position: relative;
top:172px;
margin-left: -8px;
margin-right: -8px;
}
#SctnImage {
display:inline;
}
#TileFistLine {
display: inline;
font-size: 50px;
position:absolute;
top: -20px;
}
#TileSecLine {
font-size: 12px;
position: absolute;
top: 80px;
left: 100px;
}
#TblHead {
top:120px;
width:1100px;
text-align:center;
font-size: 10px;
vertical-align: middle;
border-style: solid;
border-width: 1px;
border-collapse: collapse;
table-layout: fixed;
background-color:white;
position: fixed;
z-index: 1;
}
#DataTable {
border-collapse: collapse;
table-layout: fixed;
margin: auto;
width: 1100px;
text-align:center;
vertical-align:middle;
z-index: -1;
}
#nav_menu{
width: 1100px;
height: 175px;
position:fixed;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
top:0;
background-color:white;
z-index: 1;
display: inline;
}
#tail{
position:relative;
width:1100px;
height:40px;
margin:auto;
bottom: 0px;
}
tr, td {
border-style: solid;
border-width: 1px;
border-color: #99FFFF;
}
.DataRows:hover {
background-color: #E5F1FB;
}
.DownButt {
width:90px;
height:23px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.DesignCell{
padding: 0 0 0 0;
}
#Navigation{
width:1098px;
height:35px;
border: 1px solid;
border-color:#99FFFF;
position:fixed;
margin-left:auto;
margin-right:auto;
right: 0;
left: 0;
bottom:0px;
background-color:white;
z-index: 1;
}
#home_butt{
position: relative;
top:3px;
left:4px;
height:30px;
width:90px;
padding: 0px;
margin: 0px;
}
#CountrySelector {
width: 150px;
position: relative;
left: 6px;
bottom: 7px;
height: 18px;
}
#SectSelector {
width: 150px;
position: relative;
left: 6px;
bottom: 7px;
height: 18px;
}
你可以分享你的HTML代碼？ – Archana
@Archana，我已經按要求引用了代碼。 – Rat2good