Fatal编程技术网
  • html/
  • Html 创建一个水平滚动而非垂直滚动的固定div

Html 创建一个水平滚动而非垂直滚动的固定div

html css

Html 创建一个水平滚动而非垂直滚动的固定div,html,css,Html,Css,我用两部分创建了html：固定div（标题）和下面的长表。我固定了标题，因为表中有很多列，所以必须始终保持标题在顶部。当页面滚动时，它们就像Excel电子表格一样，冻结了行-标题始终位于顶部，表格在标题下滚动。在我调整窗口大小之前，一切正常。表格相对于页眉水平滚动，但页眉不滚动，因此页眉上的列名和表格上的列不再匹配。我的问题是，是否可以创建一个水平滚动但不垂直滚动的固定div 以下是我的HTML： <!DOCTYPE html> <head> <title&

我用两部分创建了html：固定div（标题）和下面的长表。我固定了标题，因为表中有很多列，所以必须始终保持标题在顶部。当页面滚动时，它们就像Excel电子表格一样，冻结了行-标题始终位于顶部，表格在标题下滚动。在我调整窗口大小之前，一切正常。表格相对于页眉水平滚动，但页眉不滚动，因此页眉上的列名和表格上的列不再匹配。我的问题是，是否可以创建一个水平滚动但不垂直滚动的固定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>
你在找这样的东西吗

.h-scroll{
位置：固定；
宽度：200px；
高度：200px；
边框：实心1px黑色；
溢出-x：滚动；
溢出y：隐藏；
}
水平滚动

#标题{
高度：20px；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：#f5690f；
颜色：白色；
}
#身体{
身高：90%；
位置：绝对位置；
顶部：20px；
左：0；
宽度：100%；
溢出：隐藏；
溢出y：滚动；
背景色：#672846；
颜色：白色；
}
标题
车身12132131231231231231231231231231231231231231213













































终点
可以通过以下代码实现：

overflow-x: scroll;
overflow-y: hidden;
你能分享你的html代码吗？@Archana，我已经按照要求引用了代码。你的例子很好用！但当我将此应用于上面的代码时，我会在两个方向上获得额外的滚动，考虑到您的示例，只有本地浏览器窗口滚动。在您的代码中进行实验时，我注意到，当浏览器窗口调整大小时，标题不会水平滚动，这就是我想要实现的。我希望标题总是在顶部，但必要时向左或向右滚动。 
<!DOCTYPE html>
<html>
<head>
<style>

#header {
 height:20px;
position:absolute;
top:0;
left:0;
width:100%;
background-color:#f5690f;
color:white;
}
#body {
height:90%;
position:absolute;
top:20px;
left:0;
width:100%;
overflow:hidden;
overflow-y:scroll;
background-color:#672846;
color:white;
}
</style>
</head>
<body>

<div id=header>Header</div>
<div id=body>Body1213213123213123213213212313123123213123213</br>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
End
</div>

</body>
</html>

overflow-x: scroll;
overflow-y: hidden;