创建一个水平滚动而不是垂直滚动的固定div

时间：2017-06-22 07:56:53

标签： html css

我创建了两个部分的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>

和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;
}

3 个答案:

答案 0 :(得分：2)

<!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>

答案 1 :(得分：1)

你在找这样的东西吗？

.h-scroll {
  position: fixed;
  width: 200px;
  height: 200px;
  border: solid 1px black;
  overflow-x: scroll;
  overflow-y: hidden;
}
<div class="h-scroll">Horizontal scroll</div>

在上面的示例中，您看到我使用overflow-x和overflow-y来显示（scroll）或隐藏（hidden）滚动条

希望它有所帮助。

答案 2 :(得分：0)

可以通过以下代码来实现，

Build.VERSION_CODES.JELLY_BEAN_MR2 = 18
相关问题
最新问题