I'm trying to make a scrollable table with fix header. This works well if the data is entered to HTML, but when I try to echo content of my database to the table, the scroll bar messes up and my header is no longer fixed. As seen in the photo, the scroll bar is on each table entry. I've tried .div wrapping up the table body as some did but it doesn't work.
body{
background: lightblue;
}
#tble th {
text-align: left;
background-color: green;
color: white;
}
table{
display: block;
border: 1px solid;
margin-top: 10px;
width: 350px;
}
tbody{
display: block;
height: 50px;
overflow-y: scroll;
}
th {
width: 75px;
}
td {
width: 75px;
}
<html lang="en">
<body>
<table align="center" id="tble">
<thead>
<th style="text-align: center">ID</th>
<th style="text-align: center">Username</th>
<th style="text-align: center">Rights</th>
<th style="text-align: center">Age</th>
</thead>
<tbody>
<tr>
<?php
$conn = mysqli_connect("localhost", "root", "", "account");
$result = mysqli_query($conn, "SELECT * FROM account.log WHERE rights IN ('Admin','User')", MYSQLI_USE_RESULT) or die(mysql_error());
while($row = mysqli_fetch_array( $result )) {
?>
<td style="text-align: center"><?php echo $row['id']; ?></td>
<td style="text-align: center"><?php echo $row['user']; ?></td>
<td style="text-align: center"><?php echo $row['rights']; ?></td>
<td style="text-align: center"><?php echo $row['age']; ?></td>
</tr>
</tbody>
<?php
}
?>
</body>
</table>
Is there something I missed? Hoping someone could point me to the right direction.
<!-- language: lang-html -->
<html lang="en">
<body>
<table align="center" id="tble">
<thead>
<th style="text-align: center">ID</th>
<th style="text-align: center">Username</th>
<th style="text-align: center">Rights</th>
<th style="text-align: center">Age</th>
</thead>
<tbody>
<tr>//move this from here
<?php
$conn = mysqli_connect("localhost", "root", "", "account");
$result = mysqli_query($conn, "SELECT * FROM account.log WHERE rights IN ('Admin','User')", MYSQLI_USE_RESULT) or die(mysql_error());
while($row = mysqli_fetch_array( $result )) {
?>
<tr> //to here
<td style="text-align: center"><?php echo $row['id']; ?></td>
<td style="text-align: center"><?php echo $row['user']; ?></td>
<td style="text-align: center"><?php echo $row['rights']; ?></td>
<td style="text-align: center"><?php echo $row['age']; ?></td>
</tr>
</tbody>
<?php
}
?>
</body>
</table>
Related
I have create a table where I have retrieve data from database and put into table. I have a column in my database which is duration. for example duration is 10 so, number of weeks are week1,week2,week3 and so on in the table format. Now, I want to give horizontal scroller of weeks. So, How can I do this ?Please help me.
code:
<table class="table table-bordered">
<thead>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<th>A4</th>
<?php
foreach ($prop as $row)
{
$duration = $row['duration'];
for($i=1; $i<=$duration; $i++)
{
echo "<th>week".$i."</th>";
}
}
?>
<th>A5</th>
<th>Total</th>
</thead>
<tbody>
<?php
foreach ($prop as $row)
{
$duration = $row['duration'];
$role = explode(",", $row['role']);
foreach ($role as $key)
{
$this->db->select('*');
$this->db->from('designation_master');
$where = "id = '".$key."'";
$this->db->where($where);
$sql = $this->db->get();
$res = $sql->result_array();
foreach ($res as $rows)
{
$rol = $rows['designation_name'];
}
?>
<tr>
<td id="s-some"><?php echo $rol; ?></td>
<td id="s-some"></td>
<td id="s-some"></td>
<td id="s-some"></td>
<?php
$duration = $row['duration'];
for($i=1; $i<=$duration; $i++)
{
echo "<td>
<input type='text' name='a' id='a".$i."' style='width: 40px;'/>
</td>";
}
?>
<td id="s-some"></td>
<td id="s-some"></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
Thank You
You can make a holder for your table. and place your table inside.
Use overflow and place the table inside an holder. You can check the code below for reference.
.table-box{
max-width: 100px;
overflow-x: scroll;
}
.table-holder{
overflow: hidden;
}
/* Not important -> table styling */
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<div class="table-holder">
<div class="table-box">
<table >
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>
</div>
I want to set all header and footer in all page in a pdf with mpdf,
So, my code looked like this :
<!DOCTYPE html>
<html>
<head>
<title>Data Category</title>
<style type="text/css">
.page{
padding-top:2.5cm;
padding-right:1.5cm;
padding-left:1cm;
padding-bottom:5cm;
}
table{
border-spacing:0;
border-collapse: collapse;
width:100%;
page-break-inside:auto;
}
table td, table th{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="page">
<table border="0">
<thead>
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Jam</th>
<th>No struk</th>
<th>Nama</th>
<th>Quantity</th>
<th>Nama Item</th>
<th>Harga Jual</th>
<th>Sub total</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach ($data as $key => $value) {
?>
<tr>
<td><?= $no++ ?></td>
<td><?= $value['date_format'] ?></td>
<td><?= $value['jam'] ?></td>
<td><?= $value['struk_no'] ?></td>
<td><?= $value['nama_karyawan'] ?></td>
<td><?= $value['jumlah_jual'] ?></td>
<td><?= $value['nama_item'] ?></td>
<td><?= $value['harga_jual'] ?></td>
<td><?= $value['subtotal'] ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
I have alread read their docs from here : mpdf docs.
But, when my table is loaded more than one page, the table breaks the header:
$detail = Yii::$app->db->createCommand($this->getSqlReportDetail($parseStart, $parseEnd))->queryAll();
$html = $this->renderPartial('_report_detail', ['data' => $detail]);
$mpdf = new \mPDF('c', 'A4', '', '', 0, 0, 0, 0, 0, 0);
$mpdf->SetDisplayMode('fullpage');
$mpdf->list_indent_first_level = 0; // 1 or 0 - whether to indent the first level of a list
$mpdf->SetHTMLHeader(''
. '<div style="text-align: center; font-weight: bold;">'
. '<h1>Hair Deeper Salon</h1><br>'
. '<hr>'
. '</div>'
);
$mpdf->SetHTMLFooter('
<table width="100%" style="vertical-align: bottom; font-family: serif; font-size: 8pt; color: #000000; font-weight: bold; font-style: italic;">
<tr>
<td width="33%"><span style="font-weight: bold; font-style: italic;">{DATE j-m-Y}</span></td>
<td width="33%" align="center" style="font-weight: bold; font-style: italic;">{PAGENO}/{nbpg}</td>
<td width="33%" style="text-align: right; ">My document</td>
</tr>
</table>
');
$mpdf->WriteHTML($html);
$mpdf->Output();
exit;
This is the document right now :
Try using this before setting header and footer
$mpdf->setAutoTopMargin = 'stretch';
$mpdf->setAutoBottomMargin = 'stretch';
I'm having problems showing all the results in my modal. There are three rows I want to display in the modal: Billing months for June 2016, May 2016, and April 2016, but only the latest(June 2016) will show. Here's the part of my code:
if(isset($_GET['id']))
{
$page_id = $_GET['id'];
$select_query = "SELECT * FROM billing_info INNER JOIN customer_login ON billing_info.account_no=customer_login.account_no WHERE billing_info.account_no='$page_id' ";
$run_query = mysqli_query($conn,$select_query);
while($row = mysqli_fetch_array($run_query))
{
$id = $row['user_id'];
$cust_fname = $row['cust_fname'];
$cust_mname = $row['cust_mname'];
$cust_lname = $row['cust_lname'];
$branch = $row['branch'];
$account_no = $row['account_no'];
$billing_month = $row['billing_month'];
$pres_reading = $row['pres_reading'];
$prev_reading = $row['prev_reading'];
$payment_status = $row['payment_status'];
$due_date = $row['due_date'];
$int_pres = intval($row["pres_reading"]);
$int_prev = intval($row["prev_reading"]);
$difference = $int_pres-$int_prev;
$payment = $difference*26.678;
$cust_fname = ucfirst($cust_fname);
$cust_mname = ucfirst($cust_mname);
$cust_lname = ucfirst($cust_lname);
$branch = ucfirst($branch);
?>
<div id="openModal" class="modalDialog" style="width:100%;">
<div id="form-sms" style="height: 500px; overflow: scroll;">
<div class="close"> X</div>
<form method="get" action="customer_view.php?id=<?php echo $id; ?>" name="id" enctype="multipart/form-data">
<table width="100%" bgcolor="white" align="center">
<style type="text/css">
td.hundred{
width: 80%;
text-align: center;
}
input {
width: 100%;
}
input[type="text"]{
width: 90%;
text-align: left;
}
input[type="submit"]{
width: 100%;
text-align: center;
}
textarea{
width: 90%;
text-align: left;
margin-left: 10%;
}
td {
padding: 10px;
}
.tdhover:hover {
color: #AFEEEE;
}
</style>
<tr >
<td align="center" colspan="10"><h1><?php echo $cust_fname." ".$cust_mname." ".$cust_lname." - ".$account_no." - ".$branch." Details" ?></h1></td>
</tr>
<tr bgcolor="#20B2AA">
<th>Billing Month</th>
<th>Present Reading</th>
<th>Previous Reading</th>
<th>Payment</th>
<th>Status</th>
<th>Due Date</th>
<th>Water Usage (in m<sup>3</sup>)</th>
<th>Edit</th>
</tr>
<tr bgcolor="#AFEEEE">
<td><?php echo $billing_month; ?></td>
<td><?php echo $pres_reading; ?></td>
<td><?php echo $prev_reading; ?></td>
<td><?php echo "Php " . $payment; ?></td>
<td><?php echo $payment_status; ?></td>
<td><?php echo $due_date; ?></td>
<td><?php echo $difference; ?></td>
<td>Edit</td>
</tr>
<tr style="margin-top: 10px;">
<td bgcolor="#20B2AA" align="center" class="tdhover" colspan="10">Add Billing Information</td>
</tr>
</table>
</form>
</style>
</table>
</form>
</div>
</div>
<?php } }?>
You should loop/parse the data only for <tr> and <td> Not for all tag like <table> and <div> outer the table. Html will loop all of inside { ... } sign.
Then, your style code should be placed the upper (not fix with html/php). This your code should be:
<style type="text/css">
td.hundred{
width: 80%;
text-align: center;
}
input {
width: 100%;
}
input[type="text"]{
width: 90%;
text-align: left;
}
input[type="submit"]{
width: 100%;
text-align: center;
}
textarea{
width: 90%;
text-align: left;
margin-left: 10%;
}
td {
padding: 10px;
}
.tdhover:hover {
color: #AFEEEE;
}
</style>
<?php
if (isset($_GET['id'])) {//open the isset
$page_id = $_GET['id'];
$select_query = "SELECT * FROM billing_info INNER JOIN customer_login ON billing_info.account_no=customer_login.account_no WHERE billing_info.account_no='$page_id' ";
$run_query = mysqli_query($conn, $select_query);
?>
<div id="openModal" class="modalDialog" style="width:100%;">
<div id="form-sms" style="height: 500px; overflow: scroll;">
<div class="close"> X</div>
<form method="get" action="customer_view.php?id=<?php echo $id; ?>" name="id" enctype="multipart/form-data">
<table width="100%" bgcolor="white" align="center">
<?php
while ($row = mysqli_fetch_array($run_query)) { //open the while
$id = $row['user_id'];
$cust_fname = $row['cust_fname'];
$cust_mname = $row['cust_mname'];
$cust_lname = $row['cust_lname'];
$branch = $row['branch'];
$account_no = $row['account_no'];
$billing_month = $row['billing_month'];
$pres_reading = $row['pres_reading'];
$prev_reading = $row['prev_reading'];
$payment_status = $row['payment_status'];
$due_date = $row['due_date'];
$int_pres = intval($row["pres_reading"]);
$int_prev = intval($row["prev_reading"]);
$difference = $int_pres - $int_prev;
$payment = $difference * 26.678;
$cust_fname = ucfirst($cust_fname);
$cust_mname = ucfirst($cust_mname);
$cust_lname = ucfirst($cust_lname);
$branch = ucfirst($branch);
?>
<tr >
<td align="center" colspan="10"><h1><?php echo $cust_fname . " " . $cust_mname . " " . $cust_lname . " - " . $account_no . " - " . $branch . " Details" ?></h1></td>
</tr>
<tr bgcolor="#20B2AA">
<th>Billing Month</th>
<th>Present Reading</th>
<th>Previous Reading</th>
<th>Payment</th>
<th>Status</th>
<th>Due Date</th>
<th>Water Usage (in m<sup>3</sup>)</th>
<th>Edit</th>
</tr>
<tr bgcolor="#AFEEEE">
<td><?php echo $billing_month; ?></td>
<td><?php echo $pres_reading; ?></td>
<td><?php echo $prev_reading; ?></td>
<td><?php echo "Php " . $payment; ?></td>
<td><?php echo $payment_status; ?></td>
<td><?php echo $due_date; ?></td>
<td><?php echo $difference; ?></td>
<td>Edit</td>
</tr>
<tr style="margin-top: 10px;">
<td bgcolor="#20B2AA" align="center" class="tdhover" colspan="10">Add Billing Information</td>
</tr>
<?php } //while closing
?>
</table>
</form>
</style>
</table>
</form>
</div>
</div>
Hopefully it will be success for you ;)
I am creating a table that loops information from my database. I created the table with html and added styling via an external css sheet. The table format is not displaying in any way. None of the borders are displaying and the 100% width is not working. Could my while loop be causing this affect?
<table class="tableproduct">
<tr>
<th class="thproduct">Product ID</th>
<th class="thproduct">Product Name</th>
<th class="thproduct">Price</th>
<th class="thproduct">Category</th>
<th class="thproduct">Description</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($q)) : ?>
<tr>
<td class="tdproduct"><?php echo $row['product_id']; ?> </td>
<td class="tdproduct"><?php echo $row['name']; ?> </td>
<td class="tdproduct"><?php echo $row['price']; ?> </td>
<td class="tdproduct"><?php echo $row['category']; ?> </td>
<td class="tdproduct"><?php echo $row['description']; ?> </td>
</tr>
</table>
<?php endwhile; ?>
.tableproduct {
width: 100%;
border: 1px solid black;
}
.tdproduct {
border: 1px solid black;
}
.thproduct {
height: 100px;
border: 1px solid black;
}
I ended up resolving this.
I had to put an if statement with the while loops and it created the results I was looking for.
I added this to the while loop:
if( $result ){
while($row = mysqli_fetch_assoc($result)) :
I am trying to design an HTML table where the header will stay fixed at the top of the page while scrolling down, but it is not working. Below is my html code....
<table align="center">
<?php
$select = "SELECT * FROM register where r_bid='".$_SESSION["id"]."' order by `name` ";
$result = mysql_query($select) or die(mysql_error());
$res = mysql_query("select * from regi_balic where b_id='".$_SESSION["id"]."'");
$row1=mysql_fetch_array($res);
$i=1;
echo'<thead><tr align="center">
<th width=3%><font size=3><strong>No.</strong></font></th>
<th width=10%><font size=3><strong>IC</strong></font></th>
<th width=12%><font size=3><strong>Name</strong></font></th>
<th width=12%><font size=3><strong>Reference</strong></font></th>
<th width=2%><font size=3><strong>Age</strong></font></th>
<th width=12%><font size=3><strong>Occupatin</strong></font></th>
<th width=5%><font size=3><strong>Mobile No</strong></font></th>
<th width=2%><font size=3><strong>Delete</strong></font></th>
</tr></thead>';
while($row = mysql_fetch_array($result))
{
echo '<tbody><tr>
<td width="3%" align="center" ><font size=3>'.$i.'</font></td>
<td width="10%"><font size=3>'.$row1['name'].'</font></td>
<td width="12%" align="left" ><font size=3>
<a href="edit_detail.phpid='.$row["r_id"].'
&cand_id='.$_SESSION["id"].'&email='.$row["email"].'">'.$row['name'].'</a></font></td>
<td width="12%" align="center" ><font size=3>'.$row['reference'].'</font></td>
<td width="2%" align="right" style="padding-right:8px" >
<fontsize=3>'.$row['age'].'</font></td>
<td width="12%" align="right" style="padding-right:8px"><font
size=3>'.$row['occupation'].'</font></td>
<td width="5%" align="right"><font size=3>'.$row['mob_no'].'</font></td>
<td width="2%"><a href="process_del_client.php?id='.$row['r_id'].'" onClick="return
ConfirmSubmit(\'Are You sure ?\')"><img src = "images/delete.png"></a></td>
</tr></tbody>';
$i++;
}
echo '</table></div></center>';
?>
</div>
and this is my CSS:
.list {
height: 409px;
width: 80%;
overflow: scroll;
}
Something like this? http://jsbin.com/fekoyi/1/edit
table {
height: 1000px; /* To force existence of a scrollbar. */
background: yellow; /* To aid seeing boundaries. */
}
th {
position: fixed; /* Fixes its position to the window. */
top: 0; /* Sets that fixed position to stick to the top of the window. */
width: 100%; /* Fills the width of the window; made it easier to see in your markup. */
background: pink; /* To aid seeing boundaries. */
}