I have a html table. Its right aligned. I have a table within it with fields. But when my chrome browser displays the table some portion of table (leftmost) is cropped in the left, ie its leftmost contents are outside of the screen.
The image of how my table looks like is here: https://yadi.sk/i/rR6rm8nuZsfXlA
How to make the right-aligned table to start at the beginning of the screen (on the left side) to see full table contents?
my code is:
<table width=600 border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#F8F7F1"><strong>ID</strong></td>
<td bgcolor="#F8F7F1">:</td>
<td bgcolor="#F8F7F1">
<?php echo $rows2['a_id']; ?>
</td>
</tr>
<tr>
<td width="18%" bgcolor="#F8F7F1"><strong>Name</strong></td>
<td width="5%" bgcolor="#F8F7F1">:</td>
<td width="77%" bgcolor="#F8F7F1">
<?php echo $rows2['a_name']; ?>
</td>
</tr>
Aligning a table to right has no meaning if your table width is bigger than screen width. You can try adding this to
<style>
#media only screen and (min-width: 600px) {
.mytable {
margin-right: 0px;
margin-left: auto
}
}
</style>
Assign the my table class to the table you want to align right and remove align=right from html.
Just remove the margin on the side and you can also use a percetage value for the auto resize of the table on screen narrowing
It looks like the width of your outer table (600) does not fill the available space on your web page. If you want the table to start at the beginning of the screen, you could try removing the right alignment like this:
<table width=600 border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#F8F7F1"><strong>ID</strong></td>
<td bgcolor="#F8F7F1">:</td>
<td bgcolor="#F8F7F1"><?php echo $rows2['a_id']; ?></td>
</tr>
<tr>
<td width="18%" bgcolor="#F8F7F1"><strong>Name</strong></td>
<td width="5%" bgcolor="#F8F7F1">:</td>
<td width="77%" bgcolor="#F8F7F1"><?php echo $rows2['a_name']; ?></td>
</tr>
</table>
</td>
</tr>
</table>
Related
I'm using mpdf to generate PDF from a form. In form I have an option to adding new rows to table. The problem is when count of rows is too big for generated PDF page. Then the table is resizing (it's smaller) instead of going to the next page.
This is mpdf code:
$mpdf=new mPDF('UTF-8','A4','','',20,15,48,25,10,10);
$mpdf->WriteHTML(generatePDF());
$mpdf->Output();
exit;
This is html table code:
function getHTMLStyle(){
$html ='<table class="items" width="100%" style="font-size: 9pt; border-collapse: collapse;" cellpadding="8">
<tr>
<td width="5%">A</td>
<td width="95%"><b>'.$a.'</b><br /><br /> '.$_POST['title'].'</td>
</tr>
<tr>
<td >B</td>
<td ><b>'.$b.'</b><br /><br /> '.$_POST['organizationName'].'</td>
</tr>
<tr>
<td >C</td>
<td></td>
<table class="items2" width="100%" page-break-before="always" >
<tr>
<td ><b>'.$c.'</b></td>'.addTableC().'
</tr>
</table>
</tr>
This is image with property view:
And this is an amage with wrong view:
How can I make a break in table and continue to another side?
Because you're incorrectly nesting tables -
<tr>
<td >C</td>
<td></td>
<table class="items2" width="100%" page-break-before="always" >
<tr>
<td ><b>'.$c.'</b></td>'.addTableC().'
</tr>
</table>
</tr>
The table should be inside the <td> tag, like so:
<tr>
<td>C</td>
<td>
<table class="items2" width="100%" page-break-before="always" >
<tr>
<td ><b>'.$c.'</b></td>'.addTableC().'
</tr>
</table>
</td>
</tr>
Need help with parsing HTML code by PHP DOM.
This is simple part of huge HTML code:
<table width="100%" border="0" align="center" cellspacing="3" cellpadding="0" bgcolor='#ffffff'>
<tr>
<td align="left" valign="top" width="20%">
<span class="tl">Obchodne meno:</span>
</td>
<td align="left" width="80%">
<table width="100%" border="0">
<tr>
<td width="67%">
<span class='ra'>STORE BUSSINES</span>
</td>
<td width="33%" valign='top'>
<span class='ra'>(od: 02.10.2012)</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
What I need is to get text "STORE BUSINESS". Unfortunately, the only thing I can catch is "Obchodne meno" as a content of first tag, so according to this content I need to get its parent->parent->first sibling->child->child->child->child->content. I have limited experience with parsing html in php so any help will be valuable. Thanks in advance!
Make use of DOMDocument Class and loop through the <span> tags and put them in array.
<?php
$html=<<<XCOE
<table width="100%" border="0" align="center" cellspacing="3" cellpadding="0" bgcolor='#ffffff'>
<tr>
<td align="left" valign="top" width="20%">
<span class="tl">Obchodne meno:</span>
</td>
<td align="left" width="80%">
<table width="100%" border="0">
<tr>
<td width="67%">
<span class='ra'>STORE BUSSINES</span>
</td>
<td width="33%" valign='top'>
<span class='ra'>(od: 02.10.2012)</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
XCOE;
$dom = new DOMDocument;
$dom->loadHTML($html);
foreach ($dom->getElementsByTagName('span') as $tag) {
$spanarr[]=$tag->nodeValue;
}
echo $spanarr[1]; //"prints" STORE BUSINESS
I'm using DOMPDF to generate pdf files from html. PDF file is getting generated but there are many blank pages are appearing in between content. Following is my php code.
<?php
$html=file_get_contents("views/testnew.html");
// echo $html;die();
$paper_orientation = 'landscape';
ob_start();
require_once("dompdf/dompdf_config.inc.php");
$pdfcontent = $html;
$dompdf = new DOMPDF();
$dompdf->set_paper('A4', $paper_orientation);
$dompdf->load_html($pdfcontent);
$dompdf->render();
// $pdf = $dompdf->output();
$pdf=$dompdf->stream("my_pdf.pdf", array("Attachment" => 0));
// file_put_contents('Brochure.pdf', $pdf);
?>
Following is my HTML that is I'm writing in PDF file
http://jsfiddle.net/6RmmB/
Since PDF is getting generated I don't think there is any problem with PHP code. Something must be wrong in html, But not able to figure it out what exactly ?
Or I'm missing something in PHP code ?
Content next to "Employer identification number" is appearing after about 8-9 blank pages
This looks to be due to a bug in how dompdf handles paging of table cells. If you remove the outer table, which appears to only exist to supply a border, the page will render better. You may still need to tweak the structure/styling, however, to get exactly what you want.
For example, instead of this:
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="" style="border:1px solid #ccc;color: #000;font-family: Arial,Helvetica,sans-serif;font-size:14px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-bottom:1px solid #ccc">
<tr>
<td width="15%" align="left" valign="top" style="border-right:1px solid #ccc;padding:10px;line-height:20px">Form
<img src="/var/www/html/pm5/bodytechniques/working/development/version5/therapist/images/w9-form.JPG" width="83" height="37" style="margin-left:15px" />
<br>(Rev. August 2013)
<br>Department of the Treasury
<br>Internal Revenue Service</td>
<td width="69%" align="left" valign="top" style="border-right:1px solid #ccc;padding:10px;text-align:center;line-height:45px">
<h1 align="center">Request for Taxpayer Identification Number and Certification</h1>
</td>
<td width="16%" align="left" valign="top">
<h3 style="line-height:25px;padding:10px">Give Form to the requester. Do not send to the IRS</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
Do this:
<div style="border:1px solid #ccc;color: #000;font-family: Arial,Helvetica,sans-serif;font-size:14px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-bottom:1px solid #ccc">
<tr>
<td width="15%" align="left" valign="top" style="border-right:1px solid #ccc;padding:10px;line-height:20px">Form
<img src="/var/www/html/pm5/bodytechniques/working/development/version5/therapist/images/w9-form.JPG" width="83" height="37" style="margin-left:15px" />
<br>(Rev. August 2013)
<br>Department of the Treasury
<br>Internal Revenue Service</td>
<td width="69%" align="left" valign="top" style="border-right:1px solid #ccc;padding:10px;text-align:center;line-height:45px">
<h1 align="center">Request for Taxpayer Identification Number and Certification</h1>
</td>
<td width="16%" align="left" valign="top">
<h3 style="line-height:25px;padding:10px">Give Form to the requester. Do not send to the IRS</h3>
</td>
</tr>
</table>
</div>
I have problem when multiple tables doesn't fit to one page.
Solution for this is easy, add <div style="clear: both;"> after table.
I have a Table already written in PHP that echos out data called from the database like so:
<TABLE cellSpacing=1 cellPadding=2 align=center bgColor=#aaaaaa border=0 width="100%" class="logintbl">
<TR>
<TD bgColor=whitesmoke colSpan=0><B>Pages</B></td>
</tr>
<tr>
<td>
<table align="center" cellSpacing=0 cellPadding=2 border="0" width="100%">
<tr>
<td align="center" valign="bottom"> <font color="#4d71a1"><b>Page Name</b></font> </td>
</tr>
<?php while ($row = mssql_fetch_array($result)) { ?>
<tr bgcolor="#eeeeee">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php } ?>
<tr><td colspan="7"> </td></tr>
<tr>
<td colspan="7" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
I have been trying to alternate the colours of the rows, using a snippet of PHP and after some research implemented this:
<tr bgcolor="<?php echo ($clrCounter++ % 2 == 0 ? '#000000' : '#ffffff'); ?>">
It doesn't seem to work correctly, so I feel I am going wrong somewhere, I know there is longer ways to implement this that I could implement. I was just hoping for something simple. Am I wasting effort trying to implement it this way?
I integrated it as follows:
<TABLE cellSpacing=1 cellPadding=2 align=center bgColor=#aaaaaa border=0 width="100%" class="logintbl">
<TR>
<td bgColor=whitesmoke colSpan=0><B>Pages</B></td>
</tr>
<tr>
<td>
<table align="center" cellSpacing=0 cellPadding=2 border="0" width="100%">
<tr bgcolor="#3A7525">
<td align="center" valign="bottom"> <font color="#4d71a1"><b>Page Name</b></font> </td>
</tr>
<?php while ($row = mssql_fetch_array($result)) { ?>
<tr bgcolor="<?php echo ($clrCounter++ % 2 == 0 ? '#C2C2C2' : '#ffffff'); ?>">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php } ?>
<tr>
<td colspan="7" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
It sort of works, but for some reason the very first entry is blue? When I've specified white and grey.
You could use the following when looping through the results returned from your db:
<?php
// Define row colors
$color1 = "#FFFFFF";
$color2 = "#F4F9FF";
// Set row counter
$row_count = 0;
while ($row = mssql_fetch_array($result)) {
$row_color = ($row_count % 2) ? $color1 : $color2;
?>
<tr bgcolor="<?php echo $row_color; ?>">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php
$row_count++;
}
?>
Alternatively, you could replace the bgcolor tags and assign a CSS class to each row.
Use the CSS selector :nth-of-type( ).
By putting different styles for both the :nth-of-type(even) and :nth-of-type(odd) the browser does the alternating styling for you, so you won't have to worry about it.
See the W3Schools entry on this.
Try This:
<tr <?php if($i%2){?>bgcolor="#eeeeee"<?php } else{ ?>bgcolor="red" <?php } $i++; ?>>
Thanks to Bas van den Heuvel for the great answer using CSS. If you encountered extra line spacing like I did, and want to remove it, use the following example code. This will make the alternating color lines be tighter together. (I used light grey and white)
p:nth-of-type(odd)
{
background:#e2e2e2;
margin: 0px;
padding: 0px;
}
p:nth-of-type(even)
{
background:#ffffff;
margin: 0px;
padding: 0px;
}
This is the code I am using to display a row in a table:
$msg.='<tr class="'.$outclass.'" onClick="popticket('.$ticket['TicketID'].');" onmouseover="this.className='.$overclass.';" onmouseout="this.className='.$outclass.';" '.$reg1.' '.$reg2.' >
<td width="10%" align="center" class="style28" style="padding: 5px;">'.$ticket['TicketID'].'</td>
<td width="25%" align="left" class="style28">'.substr($ticket['customer_bus_name'], 0, 34).'</td>
<td width="12%" align="center" class="style28">'.$newpr.'</td>
<td width="15%" align="center" class="style28">'.$status.'</td>
<td class="style28">'.strip_tags($ticket['desc']).'</td>
<td width="60px" align="center" class="style28"><span style="display:none;">'.$ticket['updated'].'</span>'.$new_up.'</td>
<td width="45px" align="center" class="style28"><span style="display:none;">'.$ticket['scheduled'].'</span>'.$new_im.'</td>
</tr>';
Here each PHP variable has its own value. The problem is that the class given in the onmouseover and mouseout is not working.
I want to get this row as (this is the correct output):
<tr class="ticketrowsoutread" onmouseout="this.className='ticketrowsoutread';" onmouseover="this.className='ticketrowsover ticketrowsover2';" onclick="popticket('232');">
<td width="10%" align="center" class="style28" style="padding: 5px;">232</td>
<td width="25%" align="left" class="style28">net works</td>
<td width="12%" align="center" class="style28">Medium</td>
<td width="15%" align="center" class="style28">in progress</td>
<td class="style28">adsfasdf</td>
<td width="60px" align="center" class="style28"><span style="display:none;">1334709567</span>1 day</td>
<td width="45px" align="center" class="style28"><span style="display:none;">-</span></td>
</tr>
When I run my code it displays onmouseout="this.className=ticketrowsoutread;" instead of onmouseout="this.className='ticketrowsoutread';".
How can I get the desired output?
Add backslashes to escape the qote
onmouseover="this.className=\''.$overclass.'\';"