I have PHP script which has nested loops. One first loop get's the data and second loop which checks the data and if quantity is more than 1; it loops through and display each order separately. All works fine.
I'm having some styling issues.
One of my is inside loop.
for($i=0; $i < $row['numberassigned_vnr']; $i++){
?>
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img alt="" class="yellow-process center-block " id ="cut-full-roll-<?php echo $row['id_vnr']; ?>" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
The number of my second can be anything from 1 to 6. And the "cut" picture will be displayed according to the number of quantity. If quantity, 3 picture will be displayed in a row.
My question is how i can keep the image size same. At the moment the more qunatity loop has the smaller the image become. I would like to keep all images same.
How I can achieve this. Thank you.
Set the <img> height and width to fixed values.
You can achieve this by using CSS.
td {
width: *px*|*%*;
height: *px*|*%*;
}
Or the same to images.
img {
width: *px*|*%*;
height: *px*|*%*;
}
If you realy want all the images to be of the same size irrespective of their number in the row, then give fixed sizes to your images as I suggested in the second option above.
Don't use % for height and width, use px instead as you need fixed size irrespective of row width.
Make sure that you had not given any specific width or height or something like that in class table or table-bordered
Then specify stylings to the td eg.
td {
min-width :256px; 1/6th of Screen size
......
}
Hope it helps
Let me know if you require any further help
Related
I am working plotting one html/php table using following code.
$color=array("#000000","#0000FF","00FFFF","#00FF00","#FFFF00","#7FFFD4","#FF0000","#FF9900","#FFFFFF","#00BFFF");
echo "<br>Color Codes:<br><br>";
echo '<table border="1" cellpadding="0" cellspacing="0"><tr>';
for($i=0;$i< sizeof($color); $i++)
{
echo "<td height='5px' width='10' bgcolor='".$color[$i]."'>($i/10)</td>";
}
echo '</tr>';
echo '</table><br>';
But when I plot this I get following output:
Here height does not decrease with height paramer as I need to just create rectangular boxes.
I replicated your code and didn't see what you're seeing, so I think you may have other styles on the page where you're plotting this that are interfering with the layout. You can take the height attribute off the td elements; then try adding a style="" attribute on the table and testing different properties.
<table style="line-height: 1;"> - try that for starters.
I'm new to PHP and trying to make the tables appear next to each other instead of appearing under the first one. I was trying to use "table style="float: left"" but that apparently doesn't work in PHP, anyone have an idea of how to do this?
Tried to fix it using your help, but nothing happens, maybe I'm misunderstanding something, I'm not very great at this.
<html>
<head>
<title>Produktsida</title>
<style type=”text/css”>
table {
display: inline-block
width: 500px;
}
</style>
</head>
<body>
<?php
require_once 'dbconfig.php';
$result = mysqli_query($con,"SELECT * FROM produkt JOIN bild ON bild.idBild = produkt.idProdukt JOIN ingrediens ON ingrediens.idIngrediens = produkt.idProdukt");
?>
<table border='1'>
<?php
while($row = mysqli_fetch_array($result))
{
$imgData = base64_encode($row['Bild']);
?>
<tr>
<td>
<img src="data:image/jpeg;base64,<?php echo $imgData ?>" /> </td>
</tr>
<tr>
<td>
<?php echo $row['Produkt_Namn'] ?>
</td>
</tr>
<?php } ?>
</table>
<?php
mysqli_close($con);
?>
</body>
PHP has very little to do with this. The browser (which does the rendering) only sees the output from PHP (and any static files you reference).
table style="float: left" should work fine, just watch your quotes. You can't use an unescaped " inside a PHP string literal that is delimited by " characters.
Either use ' or escape the quote character.
PHP isn't a client-side language, it's server-side. Any output that you make in PHP is rendered as HTML.
By default, I believe tables are block level items, meaning that they don't allow content next to them.
What you can do is wrap your tables in a DIV element.
CSS
div.table-holder1 { width:50%; float:left; }
div.table-holder2 { width:50%; float:right; }
PHP
print '<div class="table-holder1"><table>...</table></div>';
print '<div class="table-holder2"><table>...</table></div>';
Unless you gave your tables a class, I'd do this:
<table class="myTableClass">
....
</table>
.myTableClass{width:40%; float:left; margin-right:5%}
That oghtta fix it
Not directly related to the question
My first tip would be to reformat your code without echoing every line of code:
<?php
$result = mysqli_query($con,"SELECT * FROM produkt JOIN bild ON bild.idBild = produkt.idProdukt JOIN ingrediens ON ingrediens.idIngrediens = produkt.idProdukt");
?>
<table border='1'>
<?php
while($row = mysqli_fetch_array($result)) { /* Begin looping the rows */
$imgData = base64_encode($row['Bild']);
?>
<tr>
<td>
<img src="data:image/jpeg;base64,<?php echo $imgData ?>" />
</td>
</tr>
<tr>
<td>
<?php echo $row['Produkt_Namn'] ?>
</td>
</tr>
<?php } /* End looping the rows */ ?>
</table>
<?php
mysqli_close($con);
?>
The answer
You have to style your table with css. By default tables are a block level element which automatically put a line break after the element.
There are two main types of display properties of css:
//The default for the tables, divs etc. Most elements use display: block.
display: block
//The default for span, img and some others
display: inline
As you may know, a span element doesn't put a line break after the element, so you could've used it if it was not for one problem: They don't have any real dimensions, so you can't set a width or height to them for example.
To solve this modern browsers has implemented display: inline-block which combines the no line break of a span and the dimensions of a div. According to caniuse it has closely to 93% browser support, so it's almost ready to be used.
If you want to go with display: inline-block, you could use this css snippet:
table {
display: inline-block
width: 500px;
}
If you would like to read more about inline-block, refer to this question about float vs inline-block.
I have tried numerous different page-break rules on a table element and I've exhausted myself.
Project location:
https://github.com/xremainnameless/lead_tracker
The table I'm trying to print is located on 'leads_queue_u.php' inside the '#lead_wrapper_u' div. I dynamically create the table using 'scripts/fill_all_leads_u.php' and I print the table using the custom print button on the document.
No matter which css rules I've applied, I can't seem to force the page breaking. I deleted all of my attempts, as to show cleaner code. Here is a snippet of the #print CSS:
#media print {
#page {size: landscape;}
body * {visibility: hidden;}
#lead_wrapper_u, #lead_wrapper_u * {visibility: visible;}
#lead_wrapper_u button {visibility: hidden;}
#lead_wrapper_u {
position: absolute;
left: 0;
Top: 0;
}
}
I always advice to not use the print button in the browsers (ctrl + p); because each browser has it's own preferences. You can depend on other frameworks to print the pages into different formats. e.g. fpdf framework.
But, if you insist to use the browsers button to print, you can replace all the tables, with divs; Since divs are always break in the end of the page, without distortion the layout.
for example, if you have this code:
<table>
<tr>
<td>Name</td>
</tr>
<tr>
<td>City</td>
</tr>
<tr>
<td>DOB</td>
</tr>
</table>
.
.
.
Then, you have to remove the table elemnts, and replace by a div, like this:
<div style = "border:black solid;">
<div style = "border:solid black;">Name</div>
<div style = "border:solid black;">City</div>
<div style = "border:solid black;">DOB</div>
</div>
.
.
.
This will make sure that each div will break to next page, without looking like it's been cut.
I am trying to display images vertically 5 per row using php and I have achieved it.
I am also using a div and this seems to be creating a problem.
Images are displayed horizontally, but there seems to be a huge space between each image.
Heres the php code:
<table width="500" border="0" cellpadding="2" cellspacing="3">
<tr>
<?php
// get the images for the new videos
$query = "SELECT * FROM videos";
$result = mysql_query($query);
$numimages = 0;
while ($row = mysql_fetch_assoc($result)) {
extract($row);
// extract youtube id
preg_match('/[\\?\\&]v=([^\\?\\&]+)/', $video_link,$matches);
// $matches[ 1 ] should contain the youtube id
?>
<td valign="top">
<div id="videogallery">
<a rel="#voverlay" href="http://www.youtube.com/v/<?php echo $matches[ 1 ];?>?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="<?php echo $video_title;?>">
<img src="http://img.youtube.com/vi/<?php echo $matches[ 1 ];?>/default.jpg" alt="<?php echo $video_title;?>" class="border_black" />
</a>
</div>
</td>
<?php
$numimages++;
if ($numimages%3 == 0)
echo "</tr><tr>";
}
?>
</tr>
</table>
This is the css:
#videogallery {
width:500px;
zoom:1;
}
#videogallery span{
display:block;
}
#videogallery a{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:3px;
width:160px;
font:12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-weight:normal;
color:#333333;
text-decoration:none;
text-align:center;
opacity:0.87;
}
#videogallery a img{
display:block;
border:none;
margin:0;
}
#videogallery a:hover{
opacity:1;
}
I have noticed a few things. First, ids must be unique in html, but they are not in your document. You create <div id="videogallery"> in a loop, so that id appears multiple times. You should change the id into a class (or remove the div completely).
Also #videogallery is set to have a width of 500 pixels, which is also the width of the containing table. If you plan to have 5 images next to each other, the width of a div (or an image) should not exceed 100 px. Reducing the width should already help you to reduce the gap between images.
It's generally not a good idea to use tables for layout, it should be possible to get the same effect without tables. That gives you more flexibility. (Determining the number of images per row should be a layout issue, not a code issue.)
90% of that code is completely redundant.
You don't need the tables (in fact, it's considered very poor practice to use them for layout like this these days), and you don't need the wrapper <div> elements around your images.
Your <a> tags are already styled with display:inline-block;, so actually they should already line up horizontally without any of that stuff. Just put them next to each other, without all the extra junk, and they'll line up quite happily for you. You can use margin and padding to put any extra spacing between them that you do require.
All you need beyond that is a single wrapper <div> around the whole lot to enforce a fixed width for the whole block, so that they wrap onto new lines at the right points.
Hope that helps.
there seems to be a huge space between
each gap.
Do you mean a 7 pixel gap?
<table width="500" border="0" cellpadding="2" cellspacing="3">
you may avoid <table> alltogether by using div and css float see this http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
See http://jsfiddle.net/ZfyRb/
I have one table in loop which come under li:
<?php
for($i=1;$i<=$tc;$i++)
{
$row=mysql_fetch_array($result);
?>
<li style="list-style:none; margin-left:-20px">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="hline" style="width:267px"><?php echo $row['tit'] .",". $row['name'] ?></td>
<td class="vline" style="width:1px"> </td>
<td class="hline" style="width:100px"><?php echo $row['city']; ?></td>
</tr>
</table>
</li>
<?php
}
?>
The output comes like this:
alt text http://img20.imageshack.us/img20/4153/67396040.gif
I can't put table outside the loop, due to <li> sorting
if you can't use table outside the loop then i think best option will be use of
<div>
statement
for example
<div class="q-s na">
<div class="st" style="margin-right:10px; width:150px">
<div class="m-c"><?php echo $row['tit'] .",". $row['name'] ?></div>
</div>
this will be same as you one
<td>
you can define style according to your requirements.
for example
<style>
.q-s{overflow:hidden;width:664px;float:left;
padding-top:2px; padding-bottom:2px; height:25px}
.na .st{ float:left;}
.na .m-c {border-bottom:1px dotted #999; padding-bottom:10px; height:15px}
</style>
i can't put table outside the loop.
Why not? This is where it belongs. After all, you (logically) produce one table, not many of them. No need for the list item, either.
If you're unable to put the table outside of the loop, you should probably just use tags rather than creating tables, as you're defeating the purpose of even having a table by making each table a single row and trying to stack them.
Another thing to note if you are going to stick with tables:
If you're hard-coding the table width AND all of the table cell (column) widths, it may cause unexpected issues when they don't add up:
Table width = 600px
Cells = 267 + 1 + 100 = 368px