Php 样式化的HTML表格，内有垂直滚动条_Php_Html_Css

Php 样式化的HTML表格，内有垂直滚动条

php html css

Php 样式化的HTML表格，内有垂直滚动条,php,html,css,Php,Html,Css,今天，我尝试使用HTML表并从MySQL数据库填充它们。我的代码很好地满足了我的需要，因此表看起来是这样的：然而，当我把它整合到我的网站上时，我遇到了一个大问题。我使用include语句来显示我的表，以及在我的所有网页之间交换的菜单。该表显示如下：因此，我尝试了tbody.td元素的宽度，最后更改了以下代码： thead th,tbody td { width: 20%; float: left; border-right: 1px solid black; }

今天，我尝试使用HTML表并从MySQL数据库填充它们。我的代码很好地满足了我的需要，因此表看起来是这样的：

然而，当我把它整合到我的网站上时，我遇到了一个大问题。我使用include语句来显示我的表，以及在我的所有网页之间交换的菜单。该表显示如下：

因此，我尝试了

tbody.td

元素的宽度，最后更改了以下代码：

thead th,tbody td {
    width: 20%;
    float: left;
    border-right: 1px solid black;
}

为此：

tbody td{
    width: 10%;
    float: left;
    border-right: 1px solid black;
}

thead th {
    width: 20%;
    float: left;
    border-right: 1px solid black;
}

不知怎么的，它居然奏效了！但是

thead.th

元素之间的行与其他设备（如我的android）上的

tbody.td

元素之间的行并不一致，但它起到了作用：

当我使用PHP语句

include/path/to/file.PHP

包含它时，代码可以工作，但是现在如果我尝试直接查看/path/to/file.PHP，它看起来真的很奇怪，类似于上面的第一幅图像

现在我不知道第一个版本有什么问题，以及如何在其他设备（如Android）上正确显示它

请前来拯救CSS和PHP向导

（编辑：

HTML与本地HTML几乎相同，只是使用MySQL数据库的结果
该表被放入一个PHP文件中，我使用

我有一个主PHP文件（index.PHP），其中包含包含HTML表（logs.PHP）的PHP文件，使用一个名为getPage的函数

这是index.php的代码：

<?php
require_once(dirname(__FILE__) . '/functions/functions.php');

getPage('includes','home');
?>
<html>
    <head>
        <title>Fågelmatare</title>
    </head>
    <body>
        <h3>Fågelmatare</h3>
        <hr />

        <a href="?page=home">Home</a> |
        <a href="?page=logs">Logs</a> |
        <a href="?page=videos">Videos</a> |
        <a href="?page=about">About</a>
        <hr />

        <?php
            if(!isset($_GET['page'])){
                getPage('includes','home');
            }else{
                getPage('includes',$_GET['page'], 'home');
            }
        //switch($_GET['page']{
        ?>
    </body>
</html>


Fågelmatare
Fågelmatare

|
|
|

我有另一种方法，尽管跨浏览器支持仍然不是很好。它使用position:sticky，所以您需要在Safari中进行测试，或者为position:sticky启用实验标志
以下是实验：

其思想是将
包装在
中，将
设置为位置：相对
，然后只需将
设置为位置：粘性；顶部：0；

然后，您可以在包装器
上设置max height
和overflow
，使其可滚动。滚动时，
将粘在顶部
不可否认，这是一种“廉价的把戏”，因为正如您在下面看到的，滚动条从
的顶部开始，而不是
的顶部。不过，它很快很简单，一旦浏览器支持稳定下来，应该会更相关
CSS和PHP不是魔法：）输出的HTML是什么样子的？它是否完全符合您的示例中的内容？这些样式是如何应用的？在哪个php文件中包含另一个？给我们介绍一下您的产品setup@sodawillow好的，我已经更新了我的问题。希望现在应该更清楚了@莱纳斯，如果第二张图是你想要你的桌子的样子，那就去掉“float”。表格在定位CSS时表现得很奇怪。@thePav你是指tbody td，thead th{
块中的float:left？如果是，我应该使用instaed吗？@Linus，是的，float:left，你不需要在表td（甚至th）中使用float left因为它们在tr中自动对齐，所以我刚刚了解到一个已知的问题，即这种技巧在Firefox中不起作用
<?php

function getPage($dir, $filename, $default = false){
    $root = $_SERVER['DOCUMENT_ROOT'];
    $path = $root . '/' . $dir;
    if(is_dir($path)){
        if(file_exists($path . '/' . $filename . '.php')){
            include $path . '/' . $filename . '.php';
            return true;
        }

        if(file_exists($path . '/' . $filename . '.html')){
            include $path . '/' . $filename . '.html';
            return true;
        }

        if($default){
            if(file_exists($path . '/' . $default . '.php')){
                include $path . '/' . $default . '.php';
                return true;
            }

            if(file_exists($path . '/' . $default . '.html')){
                include $path . '/' . $default . '.html';
                return true;
            }
        }
    }
    return false;
}
?>