I have dynamic table in php where <tbody> content dynamically fetched from database, i want to make <thead> fixed while scroll, my code work fine in static html <tbody>.
Here is my code
<div class="data">
<table>
<thead>
<tr>
<th>Page Id</th>
<th>User Id</th>
<th>Page Title</th>
</tr>
</thead>
<?php
foreach($this->analysisL as $key => $value) {?>
<tbody>
<tr>
<td><?php echo $value['daily_clicks']?></td>
<td><?php echo $value['RDCL']?></td>
<td><?php echo $value['SDCL']?></td>
</tr>
</tbody>
<?php }?>
</table>
</div>
Here is my css
body{
font-family: sans-serif;
}
h1{
font-size: 2em;
}
p{
margin-top: 1em;
}
div{
padding: 0 50px
}
.data{
position: fixed;
top: 0;
z-index: 0;
}
.content{
position: relative;
background: #fff;
z-index: 1;
padding: 50px;
}
th,td{
width: 200px;
padding: 3px;
}
th{
background: #ccc;
}
My Goal is to make table head fixed position while scroll and the content of table body dynamic fetching from database using php loop
I recommend you to use 'head fixer' js library (https://github.com/lai32290/TableHeadFixer)
fast and easy way to make table head/foot fixed.
Related
I have two tables. One is created with html (and a little bit of php) while the other is created by two php-loops.
First of all, the stylesheet:
.statistics {
font-family: Arial, monospace;
font-size: 36px;
margin-left: 5%;
width: 90%;
}
.statistics tr {
line-height: 50px;
}
.statistics th {
text-align: center;
}
.statistics td {
text-align: center;
}
button {
margin-left: 25%;
width: 50%;
height: 40px;
border: none;
border-radius: 20px;
font-family: Arial, monospace;
font-size: 20px;
}
The following table is aligned properly:
<table class="statistics">
<tr>
<th>Benutzer</th>
<th>Artikel</th>
<th>Reservierungen</th>
</tr>
<tr>
<td><?php echo $client->statistic_getAmount();?></td>
<td><?php echo $articles->statistic_getAmount();?></td>
<td><?php echo $reservations->statistic_getAmount();?></td>
</tr>
<tr>
<th>Seiten (.php)</th>
<th>Datenbankeinträge</th>
<th>Zeilen mit Code</th>
</tr>
<tr>
<td>18</td>
<td>27</td>
<td>4407+</td>
</tr>
</table>
While this one isn't aligned properly:
<form method="post" action="webinterface.php" class="perms">
<table class="statistics">
<tr>
<th>Benutzer</th>
<?php
foreach ($permgroupa as $group) {
echo "<th>".$group."<th>";
}
echo "</tr>";
$users = $client->getUsers();
while ($row = mysqli_fetch_assoc($users)) :?>
<tr>
<td><?php echo $row['username'];?></td>
<?php foreach ($permgroupa as $group) : ?>
<td><input type="checkbox" name="<?php echo $group;?>-<?php echo $row['username'];?>" <?php if ($perms->hasPermission($row['username'], $group)) {echo "checked";}?>></td>
<?php endforeach;?>
</tr>
<?php endwhile;?>
</table><button type="submit" class="btnalter" name="alterrights">Rechte aktualisieren</button></form>
The tables in action
Does someone know, why they align in different ways?
1 - don't put your table inside a form
2 - the number of columns is not the same for the first and the second table
I have one table which is displaying proper in desktop. I want to change the layout or structure of table in mobile. Please check below image. I have to display like that. I have to display all the information in one row in mobile.Would you help me in this?
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<?php
if (isset($result_all_records->num_rows) > 0) {
// output data of each row
while($row = $result_all_records->fetch_assoc()) {
echo "
<tr>
<td>{$row['id']}</td>
<td>{$row['Name']}</td>
<td>{$row['Email']}</td>
<td>{$row['Mobile']}</td>
";
}
}
else {
echo "No records found";
}
?>
</tbody>
</table>
I found the solution from http://codepen.io/anon/pen/QwPVNW
We have to add `data-label='column name' and need to use below code in media queries. it will work
echo "
<tr>
<td data-label='id'>{$row['id']}</td>
<td data-label='Name'>{$row['Name']}</td>
<td data-label='Email'>{$row['Email']}</td>
<td data-label='Mobile'>{$row['Mobile']}</td>
";
#media only screen and (max-width: 384px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: left;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
margin-right: 20px;
}
}
i have a table and i'm using datatables and its working without any colspan added to it..but when i try to add a colspan on the last column the filtering, searching and pagination are all not showing..how can i supposed to work it out.please help me..
here is my code
CSS
.table_wrapper{
margin-top:5px;
max-width:100%;
width:100%;
margin-bottom:60px;
overflow:hidden;
-webkit-box-shadow: 0 8px 30px -6px black;
-moz-box-shadow: 0 8px 30px -6px black;
box-shadow: 0 8px 30px -6px black;
border: 3px dashed red;
height:600px;
}
.datatables{
border-collapse:collapse;
margin-right: auto;
margin-left: auto;
font-size: 13px;
}
thead th{
background-color:#6a782a;
color:#FFF;
padding-left: 10px;
padding-right: 10px;
}
tbody td{
word-wrap: break-word;
}
HTML
<div class="table_wrapper">
<table class="datatables table-striped" width="100%">
<thead>
<tr>
<th>LHID</th>
<th>LO Name</th>
<th>Province</th>
<th>Municipality</th>
<th>Barangay</th>
<th>Title Number</th>
<th>Lot Number</th>
<th>Survey Number</th>
<th>Area</th>
<th>RLBET Action</th>
<th>Reasons</th>
<th colspan="2">Action</th>
</tr>
</thead>
<tbody>
<?php
//$query = "SELECT * FROM login";
echo $LTID->viewdetails();
?>
</tbody>
</table>
</div>
Ok I can display data on to the page from the database but I am having a problem displaying it nicely in a table format so its under headers and gos down the page. This is what has happened at the moment:
Here is my page code:
<link rel="stylesheet" href="css/productiontable.css">
<?php
error_reporting(0);
require './db/connect.php';
include './includes/header.php';
?>
<h2>Productions</h2>
<div class="productiontable">
<table>
<tr>
<th>Production Name</th>
<th>Production Description</th>
<th>Production Type</th>
</tr>
<tr>
<td class="productname">
<?php
if($result = $connection->query("SELECT * FROM Production")){
if($count = $result->num_rows){
while($row = $result->fetch_object()){
echo $row->ProductionName;
?>
</td>
<td class="productinfo">
<?php
echo $row->ProductionInformation;
?>
</td>
<td class="producttype">
<?php
echo $row->ProductionType;
}
?>
</td><bR>
</tr>
</table>
<?php
$result->free();
}
}
mysqli_close($connection);
include './includes/footer.php';
Here is the css for the table:
#import url(http://fonts.googleapis.com/css?family=Dosis);
h2{
text-align: left;
color: white;
font-family: 'Dosis';
margin: 10px;
font-size: 32px;
}
h3{
font-size: 18px;
color: white;
margin: 20px;
}
.productiontable{
width: 900px;
border: 1px black solid;
margin: 10px;
}
.productname{
width: 200px;
float: left;
font-weight: bold;
margin-left: 10px;
}
.productinfo{
width: 500px;
float: left;
margin-left: 10px;
}
.producttype{
width: 200px;
float: left;
font-style: oblique;
margin-left: 10px;
}
Please help as much as possible many thanks :)
There are a couple of things wrong:
1. The br tag is not needed.
2. The loop should be outside of the tr. This way a new row will be made for every row.
In my table I am trying to change the font size. I have tried adding font size in the tag, adding it in the CSS code for the Myposts class, but nothing prevailed. How can I change the font size?
<table width="100%" border="0" class = "Myposts"; align="center" cellpadding="3" cellspacing="1" bgcolor="#686868 " >
<tr>
<td width="6%" align="center" bgcolor="#505050 " ><strong>#</strong></td>
<td width="53%" align="center" bgcolor="#505050 "><strong>Job Description</strong></td>
<td width="15%" align="center" bgcolor="#505050 "><strong>Views</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Replies</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Date/Time</strong></td>
</tr>
you can select table cells in CSS
table.Myposts tr td {
font-size: 18px;
}
.Myposts td {
font-size: 20px;
}
example in jsfiddle: http://jsfiddle.net/Wk28Y/
Please don't consider this an answer, just a different way of thinking about the issue. FIDDLE
You could get rid of the "bold" line by making the first row <th> instead of <td>.
Add the css table styling to your Myposts class.
You note in the title that it is php, but I don't see any php tags. So I assume you're passing php to an html page, thus the css styling would still work for you.
HTML
<table class = "Myposts">
<tr>
<td>#</td>
<td>Job Description</td>
<td>Views</td>
<td>Replies</td>
<td>Date/Time</td>
</tr>
</table>
CSS
table {
width: 100%;
border: 0px solid black;
background-color: #686868;
border-spacing: 1px;
}
table td {
background-color: #505050;
color: white;
text-align: center;
font-weight: bold;
padding: 3px;
font-size: 20px;
}
table tr td:nth-child(1) {
width: 6%;
}
table tr td:nth-child(2) {
width: 53%;
}
table tr td:nth-child(3) {
width: 15%;
}
table tr td:nth-child(4) {
width: 13%;
}
table tr td:nth-child(5) {
width: 13%;
}