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

Question

today I experimented with HTML tables and populating them from a MySQL database. 今天我尝试使用HTML表格并从MySQL数据库中填充它们。 My code worked well for what I needed and as is the table looked something like this: 我的代码适用于我需要的东西，因为表格看起来像这样：

http://codepen.io/anon/pen/ogYRwj http://codepen.io/anon/pen/ogYRwj

However I ran into a major problem when actually integrating it onto my website. 但是当我真正将它集成到我的网站上时遇到了一个重大问题。 I use the include statement to display my table as well as my menu to swap between all my webpages. 我使用include语句来显示我的表以及我的菜单，以便在我的所有网页之间进行交换。 The table was displayed like this: 表格显示如下：

真正的哎呀！？

So I experimented with the width of the tbody.td element and I ended up changing this code: 所以我尝试了tbody.td元素的宽度， tbody.td我改变了这段代码：

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

to this: 对此：

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

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

And somehow, it freakin' worked! 不知何故，它真的很棒！ But the lines between the thead.th elements didn't line up with the lines of the tbody.td elements on other devices such as my android, but it worked: 但是thead.th元素之间的thead.th与其他设备（如我的android）上的tbody.td元素的行tbody.td ，但它有效：

在此输入图像描述

The code works when I include it using the PHP statement include /path/to/file.php , but now if I try to directly view /path/to/file.php it looks really strange, similar to the first image above! 当我使用PHP语句include /path/to/file.php包含它时代码工作，但现在如果我尝试直接查看/path/to/file.php它看起来很奇怪，类似于上面的第一张图片！

Now I can't figure out what is wrong with the first version and how to display it properly on other devices such as Android? 现在我无法弄清楚第一个版本有什么问题，以及如何在Android等其他设备上正确显示它？

Please come to rescue CSS and PHP wizards! 请来救援CSS和PHP向导！

( EDIT: （ 编辑：

The HTML output is pretty much identical to the local except with results from the MySQL database. 除了MySQL数据库的结果外，HTML 输出与本地几乎完全相同。
The table is put into a PHP file where I link to the CSS file using 该表被放入一个PHP文件中，我使用它链接到CSS文件

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

I have one main PHP file (index.php) in which I include the PHP file containing the HTML table (logs.php) using a function called getPage. 我有一个主要的PHP文件（index.php），其中我使用名为getPage的函数包含包含HTML表（logs.php）的PHP文件。

This is the code for index.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>

I click on the <a href="?page=logs">Logs</a> hyperlink to display my table (in logs.php). 我点击<a href="?page=logs">Logs</a>超链接以显示我的表格（在logs.php中）。

In functions.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;
}
?>

Here is the source code for logs.php 这是logs.php的源代码

I'm using nginx as my web server, running on a Raspberry Pi. 我正在使用nginx作为我的Web服务器，在Raspberry Pi上运行。

) ）

Answer 1

I have another approach, although cross browser support still isn't very good. 我有另一种方法，虽然跨浏览器支持仍然不是很好。 It uses position:sticky so you'll need to test in Safari or enable experimental flags for position:sticky. 它使用position：sticky，因此您需要在Safari中进行测试或为position：sticky启用实验标记。

Here's the experiment: http://codepen.io/jpdevries/pen/vLVbpQ?editors=1100 这是实验： http ： //codepen.io/jpdevries/pen/vLVbpQ？edit = 1100

The idea is that you wrap the <table> in a <div> , set that <div> to position:relative then simply set the <thead> to position:sticky;top:0; 这个想法是，您缠绕<table>在<div>组<div>到position:relative然后简单地设置<thead>到position:sticky;top:0; . 。

You can then just set the max-height and overflow on the wrapper <div> to make that scrollable. 然后，您可以在包装器<div>上设置max-height和overflow以使其可滚动。 As it scrolls, the <thead> will stick to the top. 滚动时， <thead>将粘在顶部。

It is admittedly sort of a "cheap trick" because as you can see below the scrollbar starts at the top of the <table> , not the top of the <tbody> . 这无疑是一种“廉价技巧”，因为如下所示，滚动条从<table>的顶部开始，而不是<tbody>的顶部。 It is quick and easy though and should be more relevant once browser support stabilizes. 它既快速又简单，一旦浏览器支持稳定，就应该更加相关。

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

问题描述

1 个解决方案

解决方案1
0 2016-02-07 16:20:28

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

问题描述

1 个解决方案

解决方案1 0 2016-02-07 16:20:28

解决方案1
0 2016-02-07 16:20:28