I am trying to apply a class a TD within a table that I am iterating in PHP. The table generates just fine, and inline styling works, but I can't get the classes to apply from my style sheet.
My header with link to stylesheet
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="screen" href="bbapi.css" />
</head>
Here is my table generation which work fine:
<div>
<table class="output-table">
<tr>
<th scope="col">Store #</th>
<th scope="col">Type</th>
<th scope="col">City</th>
<th scope="col">State</th>
<th scope="col">Distance</th>
</tr>
<?php
//ITERATE LOOP TO OUTPUT XML STRING DATA INTO A TABLE
foreach($xmlcont as $url)
{
?>
<tr>
<td><?php echo "{$url->storeId}"?></td>
<td><?php echo "{$url->storeType}"?></td>
<td><?php echo "{$url->city}"?></td>
<td><?php echo "{$url->region}"?></td>
<td><?php echo "{$url->distance}"?></td>
</tr>
<?php
}
?>
</table>
</div>
Stylesheet classes (the color is just for testing atm):
table.output-table td {
background-color:aqua;
}
table.output-table th {
background-color:lime;
}
The goal is to be able to apply one class to the table header rows <th> and another to the <td> rows. For some reason either I am targeting the CSS incorrectly or something else entirely.
You have done all fine. Seems you have defined some styles for td and th in your CSS. I suggest you to try put !important to your styles.
table.output-table th {
background-color:lime!important;
}
But better way is to inspect where is exactly set styles, and remove them
Related
I've taken a look at some of the other questions about removing table tbody tags (see below) but am still stuck on a problem.
<tbody> tag displays in chrome but not source
Javascript delete a table tbody tag
How do i remove <tbody> tags from an HTML table?
After performing an SQL query, I want to generate an HTML table with the results, and then group similar rows by wrapping them in tbody /tbody tags in order to color-code the groups using CSS odd/even notation.
My javascript function to do this works fine, but the problem is that when the rows are first generated, the Chrome browser is wrapping them in tbody /tbody tags. So in the end I am left with the HTML below with an extra set of outer tbody tags (which is messing up the column alignment in the table and not displaying properly).
(* I want to get rid of the outer set of tbody tags *)
<tbody>
<tbody></tbody>
<tbody></tbody>
<tbody></tbody>
<tbody></tbody>
<tbody></tbody>
</tbody>
I realize I could work some logic into the php being used to display the table rows to begin with, and try to insert the opening and closing tbody tags that way so that the outer set is never generated, but it's a bit cleaner just displaying all the rows and then grouping them afterwards.
Is it possible to remove the outer tbody tags without removing the content between them? Thanks.
html file
<!-- start all funds table -->
<table id="all_funds_table" data-role="table" data-mode="columntoggle" class="table
table-sm table-striped table-hover">
<thead>
<tr>
<th>ng</th>
<th>FID</th>
<th>Lid</th>
</tr>
</thead>
<!-- <tbody> -->
<?php
if ($result = $connection->query($sql)) {
while ($row = $result->fetch_assoc()) {
// only display rows with ng = 1
if ($row['ng'] == 1) {
?>
<tr class="gpRep">
<td style = "text-align: center"><?= $row['ng'] ?></td>
<td style = "text-align: center"><?= $row['FID'] ?></td>
<td style = "text-align: center"><?= $row['lid'] ?></td>
</tr>
<?php
// collapse rows with ng != 1
} else {
?>
<tr class="collapse">
<td style = "text-align: center"><?= $row['ng'] ?></td>
<td style = "text-align: center"><?= $row['FID'] ?></td>
<td style = "text-align: center"><?= $row['lid'] ?></td>
</tr>
<?php
} // end if ($row['ng'] == 1)
} // end while
$result->free();
} // end if
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$connection->close();
?>
<!-- close connection -->
<!-- </tbody> -->
<script type="text/javascript">
wrapRows();
</script>
</table>
<!-- end all funds table -->
js file
function wrapRows(){
$('#all_funds_table tr.gpRep').each(function(){
$(this).nextUntil('.gpRep').add(this).wrapAll('<tbody />');
});
}
Using Javascript
Embrace the required <tbody> and instead move the rows outside of it as you iterate over them. Remove the original <tbody> when complete.
Note the need to add the first row back after calling nextUntil in each case.
$('#all_funds_table tr.gpRep').each(function(){
$(this).nextUntil('.gpRep').addBack().wrapAll('<tbody />')
.parent().appendTo($('#all_funds_table'));
});
$('#all_funds_table tbody:first').remove();
Using PHP
There really isn't any good reason not to output the <tbody> tags in the first place. This will save processing time in the browser.
<?php
if ($result = $connection->query($sql)) {
$first = true;
while ($row = $result->fetch_assoc()) {
// only display rows with ng = 1
if ($row['ng'] == 1) {
if (!$first) { echo '</tbody>'; }
$first = false;
?>
<tbody>
<tr class="gpRep">
<td style = "text-align: center"><?= $row['ng'] ?></td>
<td style = "text-align: center"><?= $row['FID'] ?></td>
<td style = "text-align: center"><?= $row['lid'] ?></td>
</tr>
<?php
// collapse rows with ng != 1
} else {
?>
<tr class="collapse">
<td style = "text-align: center"><?= $row['ng'] ?></td>
<td style = "text-align: center"><?= $row['FID'] ?></td>
<td style = "text-align: center"><?= $row['lid'] ?></td>
</tr>
<?php
} // end if ($row['ng'] == 1)
} // end while
$result->free();
} // end if
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$connection->close();
?>
<!-- close connection -->
<!-- </tbody> -->
<script type="text/javascript">
wrapRows();
</script>
</tbody>
</table>
This mix of HTML and PHP isn't particularly easy to read. Depending how much data you have to output, you may find it neater to first load the information into an array in the format you want, then convert the array to HTML output.
View table<-- this is my example. And code is provided too. I need to separate HTML from PHP, moving HTML to another file but my PHP code still be able to link with it. Is there any idea? I am trying to make something like View model controller.
<html>
<head>
<meta charset="utf-8">
<title>View Records</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="form">
<p>
Dashboard
| View Records
| Add Admin
| Logout
</p>
<table width="100%" border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th><strong>ID</strong></th>
<th><strong>Username</strong></th>
<th><strong>User Password</strong></th>
<th><strong>Full Name</strong></th>
<th><strong>Edit</strong></th>
<th><strong>Delete</strong></th>
</tr>
</thead>
</body>
<?php
$count=1;
$sel_query="Select * from admin ORDER BY id ASC;";
$result = mysqli_query($con,$sel_query);
while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<td align="center"><?php echo $row["ID"]; ?></td>
<td align="center"><?php echo $row["username"]; ?></td>
<td align="center"><?php echo $row["user_pass"]; ?></td>
<td align="center"><?php echo $row["fullname"]; ?></td>
<td align="center">
Edit</td>
<td align="center">
Delete</td>
</tr>
<?php $count++; } ?>
</tbody>
</table>
</div>
</body>
</html>```
Separating the php and html is a good start, and helps you see the next step in converting to OOP and then MVC.
MVC at this point is too broad for a simple answer here, but I would recommend this as a first step as it has the underlying principles:
PHP is always at the top; never output anything until all your logic is finished
Load configuration
Work with user input and redirect if POST
Execute business logic
Exit PHP and output HTML. Remember, PHP is essentially a templating language, might as well use it as such
Your code would then look something like this:
<?php
// load database connection, etc
$url = 'your url';
// deal with user input. Always use POST if data will be changed!
if($_POST['action'] == 'delete') {
// delete from admin where id=?
header('location: '.$url);
die;
}
// end "controller" section
// begin "model" section
$sel_query="Select * from admin ORDER BY id ASC;";
$result = mysqli_query($con,$sel_query);
// end "model" section
// begin "view" section.
// Note, you could simply put the html in a separate file and just include it here.
?>
<html>
<head>
<meta charset="utf-8">
<title>View Records</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="form">
<p>
Dashboard
| View Records
| Add Admin
| Logout
</p>
<table width="100%" border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th><strong>ID</strong></th>
<th><strong>Username</strong></th>
<th><strong>User Password</strong></th>
<th><strong>Full Name</strong></th>
<th><strong>Edit</strong></th>
<th><strong>Delete</strong></th>
</tr>
</thead>
</tbody>
<?php while($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td align="center"><?= $row["ID"] ?></td>
<td align="center"><?= $row["username"] ?></td>
<td align="center"><?= $row["user_pass"] ?></td>
<td align="center"><?= $row["fullname"] ?></td>
<td align="center">
<form method="post">
<input type="hidden" name="action" value="delete" />
<input type="hidden" name="id" value="<?= $row["ID"] ?>" />
<input type="submit" value="Delete" />
</form>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</body>
</html>
Notice that following this pattern is laying the groundwork for moving to mvc. But first, start working on your oop chops and move all the business logic into a model object.
After that, you can move the template to its own file, and have the model injected into the view, which lets the view have access to the info it needs, and then render the output.
Meanwhile, you'll need a router (all traffic is rerouted to index.php) and controller, and figure out which interpretation of MVC you will use ;)
Here's a very basic solution.
Make an HTML file as a template. E.g. "template.html". Use HTML comments as placeholders for the data. (I went with comments as it means the HTML remains compliant)
I've left out some of the non-relevant bits, so hopefully you get the idea:
<html>
...
<table width="100%" border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th><strong>ID</strong></th>
<th><strong>Username</strong></th>
<th><strong>User Password</strong></th>
<th><strong>Full Name</strong></th>
<th><strong>Edit</strong></th>
<th><strong>Delete</strong></th>
</tr>
</thead>
<tbody>
<!--ROW-->
<tr>
<td align="center"><!--ID--></td>
<td align="center"><!--username--></td>
<td align="center"><!--user_pass--></td>
<td align="center"><!--fullname--></td>
<td align="center">
Edit</td>
<td align="center">
Delete</td>
</tr>
<!--ENDROW-->
</tbody>
</table>
</div>
</body>
</html>
Then, in your PHP code, you read in the html, find the row template, and replace the fields as needed:
<?php
// Read the template
$html = file_get_contents('template.html');
// Find the row template
$regRowTemplate = '/<!--ROW-->(.*)<!--ENDROW-->/i';
preg_match($regRowTemplate, $html, $m);
$rowTemplate = $m[1];
// Start building our replacement rows
$htmlRows = '';
$count=1;
$sel_query="Select * from admin ORDER BY id ASC;";
$result = mysqli_query($con,$sel_query);
while ($row = mysqli_fetch_assoc($result)) {
// Start with a fresh copy of the template
$htmlRow = $rowTemplate;
// Replace comment placeholders with values
foreach ($row as $key => $value) {
$htmlRow .= str_replace('<!--' . $key . '-->', $value, $htmlRow);
}
// Append to our rows
$htmlRows .= $htmlRow;
$count++;
}
// Replace the row template with our expanded rows
$html = preg_replace(regRowTemplate, $htmlRows, $html);
// Do something with the html
Source untested, but should give you a good starting point. I kept it pretty raw. If I was doing this for real, I'd allow for the possibility of spaces in the comment placeholders by using a regular expression instead, but for now it's good enough.
I'm new to PHP and still learning the language. I created a php page that can show all records in my database on a table (called view_users.php). I also created two buttons "Edit" and "Delete".
I want to be able to edit records on a particular row when I click the "Edit" button attached to it. Is there a way I can do this on the same page (view_users.php).
Below is my source code for view_users.php
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="bootstrap-3.2.0-dist\css\bootstrap.css"> <!--css file link in bootstrap folder-->
<title>View Users</title>
</head>
<style>
.login-panel {
margin-top: 150px;
}
.table {
margin-top: 50px;
}
</style>
<body>
<div class="table-scrol">
<h1 align="center">All the Users</h1>
<div class="table-responsive"><!--this is used for responsive display in mobile and other devices-->
<table class="table table-bordered table-hover table-striped" style="table-layout: fixed">
<thead>
<tr>
<th>User Id</th>
<th>User Name</th>
<th>User E-mail</th>
<th>User Pass</th>
<th>Action</th>
</tr>
</thead>
<?php
include("database/db_conection.php");
$view_users_query="select * from users";//select query for viewing users.
$run=mysqli_query($dbcon,$view_users_query);//here run the sql query.
while($row=mysqli_fetch_array($run))//while look to fetch the result and store in a array $row.
{
$user_id=$row[0];
$user_name=$row[1];
$user_email=$row[2];
$user_pass=$row[3];
?>
<tr>
<!--here showing results in the table -->
<td><?php echo $user_id; ?></td>
<td><?php echo $user_name; ?></td>
<td><?php echo $user_email; ?></td>
<td><?php echo $user_pass; ?></td>
<td> <button type="button" class="btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button></td>
</tr>
<?php } ?>
</table>
</div>
</div>
</body>
</html>
In your HTML page you can add the following code in the action column
Basically your sending the respective id by GET parameter.
<td>
<a href="editpage.php?id="<?php echo $userid; ?>>Edit</a>
</td>
In your PHP code you can access the id as follows :
<?php
if(!empty($_GET['id'])){ //Make sure that id parameter is set in your url
$userid = $filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT); //Now use the
//$userid = $_GET['id']; //The above line is safer then this line
//Now do what ever you want with the id
}
make your edit button:
<button type="button" name="<?php echo'edit[$i]'; ?>" class="btn btn-primary">Edit</button>
$i is the current id of the row in mysql of the record in the while loop.
then at the top of your view_users.php page add something like:
if(isset($_POST['edit']))
{
$row = $_POST['edit']
....have form to edit this row
....update row $i in database
....submit button
}
I have a problem - I am trying to include a background image using CSS for the layer, but it doesn't work...
The CSS file looks like this
header {
background-image: url("boisko.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
The main file looks like this
<?php
error_reporting(0);
echo "<style>";
include "styl.css";
echo "</style>";
echo "<table cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">
<tr>
<td width=\"100%\" colspan=\"2\">";
include_once"Naglowek/index.php";
echo"<td>
</tr>
<td width=\"100%\" colspan=\"2\">";
include_once"Jezyk/index.php";
echo"</td>
</tr>
</table>";
?>
The background image should show in the cell where "Naglowek.index.php" is included, but it doesn't... That file looks like this:
<?php echo "<head><br><h1>Cracow Sunday Football League</h1><br><br></head>";?>
I know I could have written that file in html, but I would prefer it staying in php if it doesn't really matter.
Why doesn't my background image show up?
You have header in the CSS, but head in the HTML
Well you kind of have the right idea. You can save your file as a .php and still write the HTML that is needed.
Change the pages to look like this.
Main Page:
`<?php
<html>
<head>
<!-- title for the document, scripts, styles, meta information,and more -->
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" colspan="2">
<?php include_once"Naglowek/index.php"?>
<td>
</tr>
<td width="100%" colspan="2">
<?php include_once"Jezyk/index.php"; ?>
</td>
</tr>
</table>
?>`
As for the CSS I don't see anything class or ID called header so nothing is going to be applied.
<div class="header"></div>
As for the "Naglowek.index.php" file, it can stay the same as it being a .php file you just don't need the tags. Just straight HTML will work.
`<head><br><h1>Cracow Sunday Football League</h1><br><br></head>`
You should get rid of the head tags because they are a container for all the head elements.
I hope this helps clear things up
I want to print a large HTML table without breaking it's rows at the end of each page. I used following code, but its not working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
#media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
<body>
<table border="1">
<?php
for($i=0;$i<50;$i++){
?>
<tr>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
Can somebody help?
you could try using orphans to specify the number of empty lines to be left at the bottom of a page; if an element's layout conflicts with an orphans setting, the element will be printed on the next page. browser support is pretty shoddy though. i would set it on tr for your example, like this:
tr{orphans:3}
Try
<table border="1">
<?php for($i=0;$i<50;$i++) { ?>
<tr>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
</tr>
<?php } ?>
</table>
You have table tag inside for loop put it before for loop.
I'm late coming to this discussion, but I had a similar problem and this was the closest discussion I could find. I've solved my own problem, and want to share it with the next guy.
I need to print a large table that is divided into segments of rows. Each segment begins with a segment header row, followed by about 5 data rows. I don't want page breaks within any segment, but I do want columns to line up across the entire table. The CSS "page-break-inside:avoid" property only works on top-level block elements, so I can't use <div> within a <table> to control pagination.
But I can use <tbody>! Apparently, in modern browsers the <table> element is just a control feature for grouping the various table parts, not a block element at all, and <tbody> is the actual block element. So page-break-inside:avoid works on it. Also, its legal to have multiple <tbody> tags within a single <table>.
So that's the secret: Use use a separate <tbody> for each segment of the table, each with the "page-break-inside:avoid" CSS property.
There are some complications. First, IE11 seems to require an "orphans:5" CSS property for this to work. Second, I tried using <thead> for the segment header row, giving it a "page-break-after: avoid" attribute, but I ran into a lot of cross-browser issues so I ended up just putting the segment headers inside their corresponding <tbody> tags. It works fine.
CSS:
tbody.segment {
page-break-inside: avoid;
orphans: 5;
}
th.segment {
border: thin solid black;
}
HTML:
<table>
<tbody class="segment">
<tr><th class="segment" colspan="3">Segment 1</th></tr>
<tr><td>data1aa</td><td>data1ab</td><td>data1ac</td><tr>
...
<tr><td>data1za</td><td>data1zb</td><td>data1zc</td><tr>
</tbody>
<tbody class="segment">
<tr><th class="segment" colspan="3">Segment 2</th></tr>
<tr><td>data2aa</td><td>data2ab</td><td>data2ac</td><tr>
...
<tr><td>data2za</td><td>data2zb</td><td>data2zc</td><tr>
</tbody>
</table>
All of the popular desktop browsers that aren't webkit-based (i.e. Firefox and Internet Explorer) now support the CSS declaration page-break-inside: avoid; on the <tr> element, which solves the OP's problem in those browsers. Webkit support is apparently limited to block elements, so the problem technically hasn't been solved yet for Chrome, Safari and Opera (and I'm pretty sure none of the other solutions posted here will help). However, it is possible to simulate the desired behavior by turning the table into a stack of unbreakable blocks. If fixed column widths are used, then this can be done with pure CSS, like so:
<style>
table {border-collapse: collapse;}
table > tbody > tr {
display: block;
page-break-inside: avoid;
}
table > tbody > tr > td {
border: 2px solid black;
width: 100px;
max-width: 100px;
}
table > tbody > tr:first-child ~ tr > td {border-top: none;}
</style>
<table>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
</table>
If you don't want to use fixed column widths, then you'll have to use javascript to ensure the column widths won't vary from row to row. My answer to another post demonstrates one way to do this, but it includes repeating table headers, which makes it much more complicated than it needs to be in this case. Still might be worth a look, though.