I need to freeze the first row for the below table, here's my current code below
Please let me know if you need anymore information
Here's an image of the table:
<head>
<style>
table,td,th
{border-collapse:collapse;}
table.myTable td, table.myTable th { border:1px solid black;padding:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#2C3539;
font-size:0.80em}
table
{width:100%;}
th{background-color:#B6B6B4;
height:10px;}
</style>
<table class="myTable">
<?php
//MySQL Database Connect
include 'connect.php';
echo "
<tr>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Mobile</th>
<th>IMEI</th>
<th>Phone</th>
<th>Message</th>
</tr></Freezing>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td>" . $row['Email'] . "</td>";
echo "<td>" . $row['Mobile'] . "</td>";
echo "<td>" . $row['IMEI'] . "</td>";
echo "<td>" . $row['Phone'] . "</td>";
echo "<td>" . $row['Message'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
What you could do instead is use the <thead> to segment your <th> tags. Then you could use either absolute of fixed positioning to have that section float above the others. Here is an example:
HTML
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Mobile</th>
<th>IMEI</th>
<th>Phone</th>
<th>Message</th>
</tr>
</thead>
<tbody>
...
</tbody>
CSS
thead {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%
z-index: 100;
}
You may also need to add some padding to the top of the <tbody> tag so that the frozen row does not sit over top of any data. Additionally, absolute positioning will be relative to the nearest positioned ancestor, so you may need to add a position to the table as well.
table {
position: relative;
}
tbody {
padding-top: 1em;
}
try this it's using jquery though Freeze Header
Related
I'm trying to put the results of an SQL query inside of a table and everytime theres a new result to make a new table data box. My code looks like
<html>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
<?php
<table style="width:100%">
<tr>
<th>
message
</th>
</tr>
while ($row = $resultSet->fetch_assoc()) {
echo "<td>" . $row['message'] . "</td>";
}
?>
But it makes a new box horizontally. How can I make it vertical and how can I also make it so it works for more than just one th element?
You need to add <tr>'s (which indicates new rows in your table)
while ($row = $resultSet->fetch_assoc()) {
echo '<tr>';
echo '<td>' . $row['message'] . '</td>';
echo '</tr>';
}
If you want to use more <th>'s, then you need to add more <td>'s.
<table style="width:100%">
<tr>
<th>
message
</th>
<th>
foo
</th>
</tr>
while ($row = $resultSet->fetch_assoc()) {
echo '<tr>';
echo '<td>' . $row['message'] . '</td>';
echo '<td>' . $row['foo'] . '</td>';
echo '</tr>';
}
?>
</table>
<th> and <td> are for setting columns and <tr> are for setting rows. So just make sure you have the same number of <th>'s and <td>'s.
I would recommend that you read up on how HTML tables work.
wrapp a <tr> short for table row around your <td> table data.
while ($row = $resultSet->fetch_assoc()) {
echo "<tr><td>" . $row['message'] . "</td></tr>";
}
Don't forget to end the table after the loop if thats what you want to do.
I have a table that looks like this:
<table class="table table-striped table-hover table-responsive" id="commenttable">
<thead>
<th>Status</th>
<th>Subject</th>
<th>Message</th>
<th>Tech</th>
<th>Emailed?</th>
<th>Date/Time</th>
</thead>
<tbody>
<?php
foreach($commresult as $row)
{
if($row['commentPrivate'] == 'yes'){
echo "<tr class='private'>";
}
else{
echo "<tr>";
}
echo "<td>" . ucwords($row['commentType']) . "</td>";
echo "<td>" . ucwords($row['commentSubject']) . "</a></td>";
echo "<td>" . $row['commentMessage'] . "</td>";
echo "<td>" . ucwords($row['commentBy']) . "</td>";
echo "<td>" . ucwords($row['commentEmailComm']) . "</td>";
echo "<td>" . $row['commentDate'] . "</td>";
echo "</tr>";
}
?>
</tbody>
What I'm trying to do is if $row['commentPrivate'] == 'yes' I want to change the background color of just that row to red.
I've tried just using <tr bgcolor="#ff7f7f"> which didn't work. So now I'm just trying to add the class 'private' to the row and target it using CSS, which I think I'm failing at miserably.
Here's the css:
.private {
background-color: #ff7f7f;
}
I've also tried:
#commenttable tbody .private {
background-color: #ff7f7f;
}
Any help is appreciated.
#commenttable .private {
background-color: #ff7f7f !important;
}
.table-striped class adds zebra-stripes to a table. So to override the same, you can put !important in your CSS like this:
.private {
background-color: #ff7f7f !important;
}
Here is a Demo
.table .table-striped is more specific than .private. Hence the rules for .table-striped prevails.
So, you can use !important to override the same.
The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.
The code below is my way on how to print my data in Table.
<style media="screen">
.noPrint{ display: block; }
.yesPrint{ display: block !important; }
</style>
<style media="print">
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
</style>
Here is my code of printing the data from the table
<div style = "border:1px solid; height:360px; width:1180px; left: 180px; position: absolute; top: 95px; overflow-x: auto;">
<div class="CSSTableGenerator" >
<div class= "yesPrint">
<?php
$con = mysql_connect("localhost","root","");
mysql_select_db("dbreport",$con);
$sql = "select * from tblreport";
$mydata = mysql_query($sql,$con);
echo "<table border=1 id='tbody'>
<tr>
<th>Crime Name</th>
<th>Time</th>
<th>Date</th>
<th>Address</th>
<th>Detail</th>
</tr>";
while ($record = mysql_fetch_array($mydata)){
echo "<tr>";
echo "<td>" . $record['Crime Name'] . "</td>";
echo "<td>" . $record['Time'] . "</td>";
echo "<td>" . $record['Date'] . "</td>";
echo "<td>" . $record['Address'] . "</td>";
echo "<td>" . $record['Detail'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_Close($con);
?>
</div>
</div>
</div>
To initiate the command
<input TYPE="button" value = "Print Report" onClick="window.print()">
Further Explanation: My code here is to print the data from my table and the table has been populated from my database. Data Transfer to Table then Print but what happens is the whole website has been print. It seems that my code Capture the site as Image and this what it print.
What I want to do is print what only on the table, how can achieve it? TY
try this,
you r using mysql_Close($con); but in real mysql_close($con);
<div style = "border:1px solid; height:360px; width:1180px; left: 180px; position: absolute; top: 95px; overflow-x: auto;">
<div class="CSSTableGenerator" >
<div class= "yesPrint">
<?php
$con = mysql_connect("localhost","root","");
mysql_select_db("dbreport",$con);
$sql = "select * from tblreport";
$mydata = mysql_query($sql,$con);
echo "<table border=1 id='tbody'>
<tr>
<th>Crime Name</th>
<th>Time</th>
<th>Date</th>
<th>Address</th>
<th>Detail</th>
</tr>";
while ($record = mysql_fetch_array($mydata)){
echo "<tr>";
echo "<td>" . $record['Crime Name'] . "</td>";
echo "<td>" . $record['Time'] . "</td>";
echo "<td>" . $record['Date'] . "</td>";
echo "<td>" . $record['Address'] . "</td>";
echo "<td>" . $record['Detail'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
</div>
</div>
</div>
With the below javascript function, you can print any element by just placing the element in the parentheses.
<input type="button" value="Print Div" onclick="PrintElem('.yesPrint')" />
Here is the entire code:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
<div style = "border:1px solid; height:360px; width:1180px; left: 180px; position: absolute; top: 95px; overflow-x: auto;" class="noPrint">
<div class="CSSTableGenerator" >
<div class= "yesPrint">
<?php
$con = mysql_connect("localhost","root","");
mysql_select_db("dbreport",$con);
$sql = "select * from tblreport";
$mydata = mysql_query($sql,$con);
?>
<table border=1 id='tbody'>
<tr>
<th>Crime Name</th>
<th>Time</th>
<th>Date</th>
<th>Address</th>
<th>Detail</th>
</tr>
<?php
while ($record = mysql_fetch_array($mydata)){
echo "<tr>";
echo "<td>" . $record['Crime Name'] . "</td>";
echo "<td>" . $record['Time'] . "</td>";
echo "<td>" . $record['Date'] . "</td>";
echo "<td>" . $record['Address'] . "</td>";
echo "<td>" . $record['Detail'] . "</td>";
echo "</tr>";
}
?>
</table>
<?php mysql_close($con); ?>
</div>
</div>
</div>
<input type="button" value="Print Div" onclick="PrintElem('.yesPrint')" />
I am trying to display the data output in to specific div within a table.
I am able to get the table setup and display the first row of the data within the table, but the rest of the output does not make it inside the table.
Anyone please can point out what am I doing wrong?
Thank you!
<?php include('header.php'); ?>
<?php
include_once 'scripts/db.php';
$result = mysqli_query($con,"SELECT * FROM employee");
?>
<div id="userlist">
<center><h3>User Listing</h3></center>
<?php
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>location</th>
</tr>";
?>
<?php
while($row = mysqli_fetch_array($result))
{?>
<div class="userlistoutput">
<?php
echo "<td width=120px>" . $row['firstname'] . "</td>";
echo "<td width=120px>" . $row['lastname'] . "</td>";
echo "<td width=120px>" . $row['location'] . "</td>";
echo "</tr>";
?>
</div>
<? echo "</table>" ?>
<?php
}?>
</div>
<?php
mysqli_close ($con);
?>
And this is the CSS for userlist:
#userlist {
list-style:none;
width: auto;
margin:30px auto 1px auto;
height:100%;
padding:0px 20px 0px 20px;
/* Rounded Corners */
border-radius: 10px;
/* Background color and gradients */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Borders */
border: 1px solid #002232;
}
That is happening because you have put the </table> inside the while statement. Try changing it to:
<?php include('header.php');
include_once 'scripts/db.php';
$result = mysqli_query($con,"SELECT * FROM employee");
?>
<div id="userlist">
<center><h3>User Listing</h3></center>
<?php
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>location</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr class='userlistoutput'>;
echo "<td width='120px'>" . $row['firstname'] . "</td>";
echo "<td width='120px'>" . $row['lastname'] . "</td>";
echo "<td width='120px'>" . $row['location'] . "</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
mysqli_close ($con);
?>
How can I make this table scrollable? I've tried different code but I always encounter a problem on this line: $avaya=mysql_query("SELECT * From avaya_pabx");. Other code that I've used had a problem when I echoed the <td>.
Here is my code:
<div id="pageContent">
<title>Avaya PABX</title>
<table class='hovertable'>
<tr>
<th width="31">---</th>
<th width="12%">Critical Spare ID</th>
<th width="11%">Serial No.</th>
<th width="8%">Comcode</th>
<th width="9%">Version</th>
<th width="12%">Circuit Pack</th>
<th width="13%">Classification</th>
<th width="8%">Location</th>
<th width="12%">Availability</th>
<th width="5%">Date</th>
<th width="7%">Client</th>
</tr>
<?php
$avaya=mysql_query("SELECT * From avaya_pabx");
$alternate=0;
while ($row=mysql_fetch_array($avaya))
{
$alternate++;
if ($alternate==3)
$alternate=1;
echo "<tr class=class$alternate onmouseover=\"this.style.backgroundColor='#ffff66';\" onmouseout=\"this.style.backgroundColor='#d4e3e5';\">";
echo "<td><font size=1>[Delete]</font></td>";
echo "<td>" . $row['critical_spare_id'] . "</td>";
echo "<td>" . $row['serial_no'] . "</td>";
echo "<td>" . $row['comcode'] . "</td>";
echo "<td>" . $row['version'] . "</td>";
echo "<td>" . $row['circuit_pack'] . "</td>";
echo "<td>" . $row['classification'] . "</td>";
echo "<td>" . $row['location'] . "</td>";
echo "<td>" . $row['availability'] . "</td>";
echo "<td>" . $row['date'] . "</td>";
echo "<td>" . $row['client'] . "</td>";
}
?>
</table>
<style>
#pageContent
{
width:100%;
height:18cm;
overflow:scroll;
}
</style>
echo the table contents into new table inside of a div that has the following css applied to is:
width:auto; /* or what you need it to be */
height: 500px; /* make this the size you want the data to be displayed in */
overflow: auto; /* this adds the scroll bars to the div when any data exceeds its hieght */
All you need is to add
table tbody{
display: block;
height: 150px;
overflow-x: auto;
overflow-y: scroll;
}
in height add the default one that you need