Question

今天我尝试使用HTML表格并从MySQL数据库中填充它们。我的代码很适合我需要的东西，因为表格看起来像这样：

然而，当我真正将它集成到我的网站时遇到了一个重大问题。我使用include语句来显示我的表以及我的菜单，以便在我的所有网页之间进行交换。表格显示如下：

what the actual heck!?

所以我尝试了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元素之间的界限与其他设备（例如我的机器人）上的tbody.td元素的行不对齐，但它有效：

enter image description here

当我使用PHP语句include /path/to/file.php包含它时代码有效，但现在如果我尝试直接查看/path/to/file.php它看起来很奇怪，类似于上面的第一张图片！

现在我无法弄清楚第一个版本有什么问题，以及如何在Android等其他设备上正确显示它？

请来救援CSS和PHP向导！

（修改

HTML output几乎与本地相同来自MySQL数据库的结果。
将表放入PHP文件中，使用

<link rel="stylesheet" type="text/css" href="path/to/style.css">

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

这是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>

我点击<a href="?page=logs">Logs</a>超链接显示我的表格（在logs.php中）。

在functions.php中

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

以下是logs.php

的源代码

我正在使用nginx作为我的网络服务器，在Raspberry Pi上运行。

）

Answer 1

我有另一种方法，虽然跨浏览器支持仍然不是很好。它使用position：sticky，因此您需要在Safari中进行测试或为position：sticky启用实验标记。

以下是实验： the Taylor expansion for sin and cos

我们的想法是将SELECT * FROM user where permission ='read' and id not in (SELECT id FROM user where permission !='read');打包在<table>中，将<div>设置为<div>，然后将position:relative设置为<thead> }。

然后，您可以在包装器position:sticky;top:0;上设置max-height和overflow以使其可滚动。滚动时，<div>将粘在顶部。

这无疑是一种“廉价技巧”，因为如下所示，滚动条始于<thead>的顶部，而不是<table>的顶部。它既快速又简单，一旦浏览器支持稳定，就应该更加相关。

http://codepen.io/jpdevries/pen/vLVbpQ?editors=1100

带有垂直滚动的程式化HTML表格

1 个答案: