帶有垂直滾動的tbody內部程式化的HTML表格

今天我嘗試了使用HTML表格並從MySQL數據庫填充它們。我的代碼工作的很好，我需要什麼，因爲是表看起來是這樣的：帶有垂直滾動的tbody內部程式化的HTML表格

但是我遇到了一個大問題時，實際上它整合到我的網站。我使用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元素之間的線路沒有與其他設備tbody.td元素，如我的Android的線排隊，但它的工作：

enter image description here

代碼工作時，我包括使用PHP它聲明include /path/to/file.php，但現在如果我嘗試直接查看/path/to/file.php它看起來很奇怪，類似於上面的第一個圖像！

現在我無法弄清楚第一個版本有什麼問題，以及如何在Android等其他設備上正確顯示它？

請前來拯救CSS和PHP嚮導！

（編輯：

的HTML output是幾乎相同的地方，除了從MySQL數據庫的結果
表放入PHP文件，我鏈接到CSS文件使用

<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）。

在函數中。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的是我的網絡服務器，在樹莓派運行的源代碼。

）

來源

2015-01-07 Linus

CSS和PHP沒有巫術:)你輸出的HTML是什麼樣的？它是否完全符合你的例子？風格如何應用？在哪個PHP文件中包含另一個？給我們一些你的設置的概述 – sodawillow

@sodawillow對，我已經更新了我的問題。希望現在應該更加清楚！ – Linus

@Linus，如果第二張圖片是你希望你的表看起來，擺脫'浮動'。表格奇怪地定位CSS。 – PavKR

我有另一種方法，雖然跨瀏覽器的支持還不是很不錯的。它使用position：sticky，所以你需要在Safari中測試或者爲位置啓用實驗性標誌：sticky。

這裏的實驗： http://codepen.io/jpdevries/pen/vLVbpQ?editors=1100

的想法是，你在<div>包裹<table>，設置<div>到position:relative，然後簡單地設置<thead>到position:sticky;top:0;。

然後，您可以在包裝<div>上設置max-height和overflow以使其可滾動。當它滾動時，<thead>將堅持頂部。

毫無疑問，這是一種「廉價把戲」，因爲您可以在下面看到滾動條從<table>的頂部開始，而不是<tbody>的頂部。雖然瀏覽器支持穩定，但它應該更加相關。

來源

2016-02-07 16:20:28

我剛剛得知有一個已知問題，這個技巧在Firefox中不起作用https：// bugzilla .mozilla.org/show_bug.cgi？ID = 975644 –

帶有垂直滾動的tbody內部程式化的HTML表格

回答

相關問題