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

today I experimented with HTML tables and populating them from a MySQL database. My code worked well for what I needed and as is the table looked something like this:

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. The table was displayed like this:

what the actual heck!?

So I experimented with the width of the tbody.td element and I ended up changing this code:

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:

enter image description here

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!

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?

Please come to rescue CSS and PHP wizards!

(EDIT:

The HTML output is pretty much identical to the local except with results from the MySQL database.
The table is put into a PHP file where I link to the CSS file using

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

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

In 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

I'm using nginx as my web server, running on a Raspberry Pi.

)

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.

Here's the experiment: http://codepen.io/jpdevries/pen/vLVbpQ?editors=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;.

You can then just set the max-height and overflow on the wrapper <div> to make that scrollable. As it scrolls, the <thead> will stick to the top.

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>. It is quick and easy though and should be more relevant once browser support stabilizes.