I created a table with fix table head. I use this simple CSS to do that.
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
width: 97%;
height: 340px;
display:block;
overflow:auto;
}
but the n the output will come like this;
I call the table from ajax. so here is the table code;
echo "<table class=\"table table-bordered table-fixed\">
<thead>
<tr>
<th class=\"col-xs-1\">No</th>
<th class=\"col-xs-2\">Name of Student</th>
<th class=\"col-xs-1\">Nic No</th>
<th class=\"col-xs-1\">Reg. No.</th>
<th class=\"col-xs-1\">adm. date</th>
<th class=\"col-xs-1\">room No</th>
<th class=\"col-xs-3\">Address</th>
<th class=\"col-xs-2\">Contact No.</th>
</tr>
</thead>
<tbody>";
$count = 1;
while($row = $result->fetch_assoc()) {
echo"
<tr id=\"".$row["reg_no"]."\" onclick=\"Redirect(this.id)\">
<td class=\"col-xs-1\">".$count."</td>
<td class=\"col-xs-2\">".$row["name_initial"]."</td>
<td class=\"col-xs-1\">".$row["nic"]."</td>
<td class=\"col-xs-1\">".$row["reg_no"]."</td>
<td class=\"col-xs-1\"></td>
<td class=\"col-xs-1\"></td>
<td class=\"col-xs-3\">".$row["resedential_adress"]."</td>
<td class=\"col-xs-2\">".$row["contact_no"]."</td></tr>
";
$count++;
}
echo "
</tbody></table>";
}
please Help me to fix this problem.
Remove display:block; from table-fixed tbody {} It will override default table property
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
width: 97%;
height: 340px;
overflow:auto;
}
issue is in your css
remove display:block; and try
Related
How do I generate Dynamic Pivot table in PHP using MySqli
I have records in MySql Database. Table structure is shown here
Now, I want to display the records in a table with multi-level headers., Like
Multi-level table, how I want to display the record.
How do I solve this issue? Please help. Thanks in advance
I have found this code, but does not appear as I want.
<?php
$output = array();
$c=1;
while($result = mysqli_fetch_array( $res ))
{
$output[$c]['headname'] = $result['headname'];
$output[$c]['accyear'] = $result['accyear'];
$output[$c]['fundamt'] = $result['fundamt'];
$output[$c]['fundutiamt'] = $result['fundutiamt'];
$c++;
}
?>
<table border="1">
<tr>
<th></th>
<?php
foreach ($output as $key => $html)
{
echo "<th>Solution ".$key."</th>";
}
?>
</tr>
<tr>
<td>Shipping Line</td>
<?php
foreach ($output as $key => $html)
{
echo "<td>".$html['accyear']."</td>";
}
?>
</tr>
<tr>
<?php
foreach ($output as $key => $html)
{
echo "<td>".$html['headname']."</td>";
}
?>
<td>POL</td>
</tr>
</table>
You can create a new array using the mysql result
<?php
$output = array();
while($result = mysqli_fetch_array( $res ))
{
$key=$result['accyear'];
if(!array_key_exists($key,$output)){
$output[$key]=array();
array_push($output[$key],array(
$result['headcode'] =array(
"fundamt" => $result['fundamt'],
"fundutiamt" => $result['fundutiamt'],
)
));
}
}
?>
print_r($output);
Result
2019 => [ 061182 => [fundamt => 12, fundutiamt => 23] ]
[ 961182 => [fundamt => 2, fundutiamt => 23] ]
You can use this array to make the table in HTML
Use the colspan attribute.
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px;
}
td {
text-align: center;
}
tr:nth-child(even) {
background-color: #eee;
}
th[scope="col"] {
background-color: #696969;
color: #fff;
}
th[scope="row"] {
background-color: #d7d9f2;
}
caption {
padding: 10px;
caption-side: bottom;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
<table>
<caption>Alien football stars</caption>
<tr>
<th scope="col">Player</th>
<th scope="col" colspan=2>Gloobles</th>
<th scope="col" colspan=2>Za'taak</th>
</tr>
<tr>
<th scope="col"></th>
<th scope="col">2016</th>
<th scope="col">2017</th>
<th scope="col">2016</th>
<th scope="col">2017</th>
</tr>
<tr>
<th scope="row">TR-7</th>
<td>7</td>
<td>4,569</td>
<td>7</td>
<td>4,569</td>
</tr>
<tr>
<th scope="row">Khiresh Odo</th>
<td>7</td>
<td>7,223</td>
<td>7</td>
<td>7,223</td>
</tr>
<tr>
<th scope="row">Mia Oolong</th>
<td>9</td>
<td>6,219</td>
<td>9</td>
<td>6,219</td>
</tr>
</table>
(original table from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td)
I am targeting a table in the database where the data is stored using serialize() function. So I am trying to unserialize the data & fetching in order to display in the HTML Table. The first row in the table, i.e, table data () is somehow displaying properly. But, the next data (coming through looping ) will be showing on the same line instead of next . Please help me out with this. Also if I am wrong in my explanation, please edit it. Here is my code...
<body style="font-family: verdana; letter-spacing: 2px">
<br><br>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
font-size: 14px;
}
table {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
}
th, td {
padding: 10px;
}
</style>
<table style="border-collapse: collapse; margin: 0 auto" cellpadding="13" border="1" width="80%">
<tr>
<th>Status</th>
<th>Company Name</th>
<th>Address</th>
<th>Your Name</th>
<th>Email</th>
<th>Phone</th>
<th>Website</th>
<th>Software Link</th>
</tr>
<tr>
<?php
$con = mysqli_connect("localhost", "ghgh", "1223546", "rererer");
$que = "SELECT * FROM wp_db7_forms WHERE form_post_id = 6167";
$run = mysqli_query($con, $que);
while ($row = mysqli_fetch_array($run)) {
$form_value = $row['2'];
$form_date = $row['3'];
$array = unserialize($form_value);
$expire = date("Y-m-d", strtotime("+90 days"));
while (list($key, $value) = each($array)) {
?>
<td style="text-align: center;"><?php echo $value; ?></td>
<?php
}
}
?>
</tr>
</table>
</body
You are managing the tr tags wrongly. You really put all dynamic content in one row, since you only generate one opening and one closing tr tag for it -- outside of all loops you have.
So put them inside the outer loop:
<table style="border-collapse: collapse; margin: 0 auto" cellpadding="13" border="1" width="80%">
<tr>
<th>Status</th>
<th>Company Name</th>
<th>Address</th>
<th>Your Name</th>
<th>Email</th>
<th>Phone</th>
<th>Website</th>
<th>Software Link</th>
</tr>
<?php
$con = mysqli_connect("localhost", "ghgh", "1223546", "rererer");
$que = "SELECT * FROM wp_db7_forms WHERE form_post_id = 6167";
$run = mysqli_query($con, $que);
while ($row = mysqli_fetch_array($run))
{ ?>
<tr>
<?php
$form_value = $row['2'];
$form_date = $row['3'];
$array = unserialize($form_value);
$expire = date("Y-m-d", strtotime("+90 days"));
while (list($key, $value) = each($array)) {
?>
<td style="text-align: center;"><?php echo $value; ?></td>
<?php } ?>
</tr>
<?php } ?>
</table>
as #trincot said, you are managing the tr tags wrong, here's a cleaner version of the code separating the php and HTML to keep your code clean and more readable :
<?php
$connection = mysqli_connect('','','','');
$result = mysqli_query($connection,'SELECT .... ');
$rows = [];
while($row = mysqli_fetch_array($result))
{
$rows[] = [
'value' => $row['2'],
'date' => $row['3'],
'expire' => date("Y-m-d", strtotime("+90 days")),
'data' => unserialize($row['2'])
];
}
?>
<table style="border-collapse: collapse; margin: 0 auto" cellpadding="13" border="1" width="80%">
<tr>
<th>Status</th>
<th>Company Name</th>
<th>Address</th>
<th>Your Name</th>
<th>Email</th>
<th>Phone</th>
<th>Website</th>
<th>Software Link</th>
</tr>
<?php foreach($rows as $row) : ?>
<tr>
<?php foreach ($row['data'] as $key => $value) : ?>
<td style="text-align: center;"><?= $value; ?></td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</table>
I hava a simple table, every tr is a link with a sepcific order, but I have to have one extra column n th with checking or this order is already in store. ( with checboxes ) I can't to this because when I add this, then all row i a link, but I want to this last column wasn't a link, but simple checboxes.
Here is my code:
<table class="table">
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Tel</th>
<th>Email</th>
<th>Status</th>
<th>Order date</th>
<th>IS in store?</th>
</tr>
<router-link :to="'/orderDetail/'+order.id" tag="tr" v-for="order in orders" :key="order.number"
class="order-row">
<td>{{order.number}}</td>
<td>{{order.client_name}}</td>
<td>{{order.phone}}</td>
<td>{{order.email}}</td>
<td>{{order.actual_status}}</td>
<td>{{order.order_date}}</td>
<td>Here should be checbox with id of roder, but not as a link</td>
</router-link>
</table>
html css :
.order-row:hover td {
cursor: pointer;
transition-duration: 0.3s;
background-color: #EfEEEE;
border-top: 1px solid #e0093e;
border-bottom: 1px solid #e0093e;
color: #e0093e;
}
First create one method, something like this
orderRedirect: function(order) {
this.$router.replace('/orderDetail/' + order.id); // For Vuejs 2
this.$route.router.go('/orderDetail/' + order.id); //For Vuejs 1
},
Then call this function on click from table td, something like this
<table class="table">
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Tel</th>
<th>Email</th>
<th>Status</th>
<th>Order date</th>
<th>IS in store?</th>
</tr>
<tr v-for="order in orders" class="order-row">
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.number}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.client_name}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.phone}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.email}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.actual_status}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.order_date}}</td>
<td><input type="checkbox"></td>
</tr>
</table>
This is one of way that you can remove link from checkbox td
Try something along the lines of:
<td><input type="checkbox" v-model="order.actual_status"></td>
I have problem the function work without when I click on drop so what is the problem here
I need to delete the record only when I click on the drop so please any help
are the query in function drop correct?
<?php
$sql="SELECT * FROM administrators";
$record=mysql_query($sql);
function drop($id,$email){
$q="DELETE FROM administrators WHERE id='$id' AND email='$email'";
mysql_query($q);
}
?>
<title>Admins Table</title>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
#creating {
font:bold;
font-size:1.6em;
}
</style>
<a href='cadmin.php' id='creating'>Create New Admin</a><br/><br/>
<table width="920" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Gender</th>
<th>Email</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
<?php
while($row=mysql_fetch_assoc($record)){
echo'<tr>';
echo'<td>'.$row['id'].'</td>';
echo'<td>'.$row['first_name'].'</td>';
echo'<td>'.$row['last_name'].'</td>';
echo'<td>'.$row['phone'].'</td>';
echo'<td>'.$row['gender'].'</td>';
echo'<td>'.$row['email'].'</td>';
echo'<td>'.$row['address'].'</td>';
echo'<td>'."<a href='' onclick=''>Edit</a>".'</td>';
echo'<td>'."<a href='' onclick='".drop($row['id'],$row['email'])."'> Drop</a>".'</td>';
echo'</tr>';
}
?>
</table>
//code here
try this code
<?php
$sql="SELECT * FROM administrators";
$record=mysql_query($sql);
function drop($id,$email){
$q="DELETE FROM administrators WHERE id='$id' AND email='$email'";
mysql_query($q);
header("Refresh:0");
}
if (isset($_GET['drop'])) {
$id=$_GET['id'];$email=$_GET['email'];
drop($id,$email);
}
?>
<title>Admins Table</title>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
#creating {
font:bold;
font-size:1.6em;
}
</style>
<a href='cadmin.php' id='creating'>Create New Admin</a><br/><br/>
<table width="920" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Gender</th>
<th>Email</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
<?php
while($row=mysql_fetch_assoc($record)){
echo'<tr>';
echo'<td>'.$row['id'].'</td>';
echo'<td>'.$row['first_name'].'</td>';
echo'<td>'.$row['last_name'].'</td>';
echo'<td>'.$row['phone'].'</td>';
echo'<td>'.$row['gender'].'</td>';
echo'<td>'.$row['email'].'</td>';
echo'<td>'.$row['address'].'</td>';
echo'<td>'."<a href='' onclick=''>Edit</a>".'</td>';
echo'<td>'."<a href='? drop=ss&id=".$row['id'].'&email='.$row['email']."'> Drop</a>".'</td>';
echo'</tr>';
}
?>
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. */
}