The below table prints data form a mysql db. Is it possible to make it responsive to adapt to even the smallest devices without losing the image. I am studying bootstrap to see how it can work.
<style>
body { margin: 0; font-family: Arial, Helvetica, sans-serif; }
.content { margin: auto; width: 99.8%; height:79.8%; border: 1px solid green; padding: 10px; background-color: magenta; }
</style>
<div class="content">
<div class="row">
<div class="col">
<?php
print "<table border=1 width=100%>";
print "<td width=10px height=auto bgcolor=#00FF33>" . $row['id'] . "</td>";
print "<td width=200px height=200px>"."<a href='".$row['image']."'><img src=".$row['image']."width=100% height=100%</a>" ."</td>";
print "<td>";
print "<table border=1 width=100%>";
print "<tr>";
print "<td>" . $row['imagename'] . "</td>";
print "</tr>";
print "<tr>";
print "<td>" . $row['name'] . "</td>";
print "</tr>";
print "<tr>";
print "<td>" . $row['username'] . "</td>";
print "</tr>";
print "<tr>";
print "<td>" . $row['useremail'] . "</td>";
print "</tr>";
print "<tr>";
print "<td>" . $row['userphone'] . "</td>";
print "</tr>";
print "<tr>";
print "<td>"."<a href='id=$uniqueid' >More Details</a>"."</td>";
print "</tr>";
print "<tr>";
print "<td>"."<a href='id=$uniqueid' >Contact Seller</a>"."</td>";
print "</tr>";
print "</table>";
print "</td>";
print "</table>";
print "<br />";
?>
</div>
Incase you're using bootstrap just add "table table-responsive" to your table class
<table class="table table-responsive">
Related
I am having this type of problem. I have a table displayed on my webpage. Wherein I have an Action column. I am trying to make my (a href) code open different files depending on what was indicated on my table whether it is pdf or an excel file.
<?php
$con=mysqli_connect("localhost","root","","annualdb");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM aviation_report");
echo "<head><style>
table {
border: 2px solid black;
width: 100%;
height: 100px;
text-align: center;
}
</style></head>";
echo "<table>
<tr>
<th>Agency</th>
<th>FileName</th>
<th>FileType</th>
<th>Date</th>
<th>Action</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['agency'] . "</td>";
echo "<td>" . $row['filename'] . "</td>";
echo "<td>" . $row['filetype'] . "</td>";
echo "<td>" . $row['date'] . "</td>";
echo "<td><a href='sample.pdf'>OPEN FILE</a></td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
You would have this code:
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['agency'] . "</td>";
echo "<td>" . $row['filename'] . "</td>";
echo "<td>" . $row['filetype'] . "</td>";
echo "<td>" . $row['date'] . "</td>";
echo "<td><a target='_blank' href='" . $row['filename'] . "'>OPEN FILE</a></td>";
echo "</tr>";
}
Hi I'm creating a questionnaire. The questions and their answers are stored in a table like so:
Now, I want to display the questions and their answers in a table where I get the questions and their possible answers on different rows. Like so:
In my php file, I echo the table and the rows but I cannot figure out how to put the questions and answer in different rows. here is how it looks like:
and here is my php code:
<?php
session_start();
$status=$_GET["status"];
include 'dbh.inc.php';
?>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
text-align: left;
padding: 8px;
}
#td_box{
text-align: center;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #006689;
color: white;
}
</style>
</head>
<body>
<?php
if ($status=="disp") {
$sql="SELECT * FROM questions";
$result = mysqli_query($conn,$sql);
echo "<table>";
while ($row=mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>"; echo $row["question"]; echo "</td>";
echo "<td>"; echo $row["optionA"];echo $row["optionB"];echo $row["optionC"];
echo $row["optionD"];echo $row["optionE"];echo "</td>";
}
}
echo "</table>";
?>
</body>
</html>
Try:
<?php
if ($status=="disp") {
$sql="SELECT * FROM questions";
$result = mysqli_query($conn,$sql);
echo "<table>";
while ($row=mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>"; echo $row["question"]; echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>"; echo $row["optionA"];echo $row["optionB"];echo $row["optionC"];
echo $row["optionD"];echo $row["optionE"];echo "</td>";
echo "</tr>";
}
}
echo "</table>";
?>
What I did:
I added a </tr> after your question echo and opend a new one directly after. Then I closed that <tr> after your last <td> as you forgot to do that.
1st : Put all option radio buttons in another tr .
2nd : Maintain proper name attribute for radio button .name="question[$row['question_id']]"
3rd : And use colspan="4" for question td
while ($row=mysqli_fetch_array($result)) {
echo "<tr >";
echo "<td colspan='4'>"; echo $row["question"]; echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionA']\" >".$row['optionA'];
echo "</td>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionB']\" >".$row['optionB'];
echo "</td>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionC']\" >".$row['optionC'];
echo "</td>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionD']\" >".$row['optionD'];
echo "</td>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionE']\" >".$row['optionE'];
echo "</td>";
echo "</tr>";
}
echo "<tr>";
echo "<td colspan='4'>"; echo $row["question"]; echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>"; echo $row["optionA"];echo "</td>";
echo "<td>"; echo $row["optionB"];echo "</td>";
echo "<td>"; echo $row["optionC"];echo "</td>";
echo "<td>"; echo $row["optionD"];echo "</td>";
echo "</tr>";
this way you will have proper answers in tabular format in aligned manner
I am relatively new to php/mysql. I am trying to do carriage returns for this part:
echo "<td colspan='5'>" . nl2br($row['dish_description']) . "</td>";
"dish_description" contains some text which includes "\n"
e.g. "Served with salad and mint sauce. \n Contains beef." In the MySQL database
however I cannot display the carriage return.
<?php
require_once 'login.php';
$con = mysql_connect($db_hostname, $db_username, $db_password);
mysql_select_db($db_database) or die("Unable to select database". mysql_error());
$result = mysql_query("SELECT * FROM `dishes` ORDER BY `dishes`.`dish_id` ASC LIMIT 0 , 200");
echo '<table align="center">
';
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td style='width: 60px'></td>";
echo "<th style='width: 100px'>Dish No</th>";
echo "<td style='width: 70px'>" . $row['dish_id'] . "</td>";
echo "<th style='width: 100px'>Dish Name</th>";
echo "<td style='width: 120px'>" . $row['dish_name'] . "</td>";
echo "<th style='width: 120px'>Dish Price</th>";
echo "<td>£" . $row['dish_price'] . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td style='width: 75px'></td>";
echo "<th style='width: 100px'>Vegetarian</th>";
echo "<td style='width: 70px'>" . $row['dish_vegetarian'] ."</td>";
echo "<td style='width: 100px'></td>";
echo "<td style='width: 70px'></td>";
echo "<th style='width: 120px'>Contains Nuts</th>";
echo "<td style='width: 120px'>" . $row['dish_nuts'] ."</td>";
echo "</tr>";
echo "<tr>";
echo "<td style='width: 75px'></td>";
echo "<th style='width: 100px'>Information</th>";
***echo "<td colspan='5'>" . nl2br($row['dish_description']) . "</td>";***
echo "</tr>";
echo "<tr height='10px'>";
echo "<td style='width: 75px'></td>";
echo "<td style='width: 100px'></td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
In my opinion if you echo it as HTML you can just add <br> tags to your records in database.
I am having trouble applying CSS styles to my dynamic table. I am connecting to a database and I know the data is populated correctly and displaying. My issue is that there are 900 records and I want to limit the table size, utilizing a scrollbar. I have read elseware that the proper CSS style nodes to accomplish this are: How to specify table's height such that a vertical scroll bar appears?
overflow: auto;
height: 700px;
display: block;
overflow-y: scroll;
At first I attempted this with inline styling (a no-no.. I realize), but it didn't work. I have read about adding a 'class' to the table and/or individual rows, which would then be reflected in my CSS style sheet, but I can't seem to figure out how to accomplish this. I get syntax errors when I add 'span' or 'class' tag designators to the PHP (I imagine from utilizing 'ECHO' - which both require double quotes).
Good example of what I'm trying to accomplish: http://www.timrivera.com/tests/csstables.html#markupIE
The PHP code snippet below has good syntax, but I don't know where to add the class or span designators appropriately. One thing to note - I need to have different styles for different tables, so changing the global 'table' CSS isn't going to work.
//Function that gets the SQL recordset.
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<table border='1' >
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>
</tr>";
while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table>";
I think the best way would be to wrap a div around the table and give the div a height.
http://phpfiddle.org/main/code/i7h-9b1
<style type="text/css">
#scroll {
height: 100px; /* Max height of table */
overflow-y: scroll;
width: 340px;
}
</style>
<div id="scroll">
table
</div>
Using your code:
echo '
<style type="text/css">
#scroll {
height: 100px; /* Max height of table */
overflow-y: scroll;
width: 340px;
}
</style>';
//Function that gets the SQL recordset.
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<div id='scroll'><table border='1' >
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>
</tr>";
while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table></div>";
Edit your PHP code to...
//Function that gets the SQL recordset.
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<div class=\"table-container\">";
echo "<table border='1' >
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>
</tr>";
while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
Then just style using
div.table-container table {}
Using Calum's style format you could do this:
//Function that gets the SQL recordset.
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<style>#size{height:100px;width:340px;overflow-y:scroll;}</style>";
echo "<table id='size' border='1'>
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>
</tr>";
while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table>";
I tested it and works fine. And for the different table styles you could:
<style>
#table1
{
style code here
}
#table2
{
style code here
}
</style>
and so on... then you could apply them to the tables:
<table id="table1">
...
</table>
<table id="table2">
...
</table>
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