HTML2PDF row table cannot page-break - html

I used HTML2PDF version 4.03 for export data to PDF, my problem is when the data format on table rows (tr) always not break to next-page and if content more than height page the content out of tr table.
I have tried this page break trick, but still does not work, please give me solutions.
Screenshots of the problem:
Here is my CSS:
body {width:100%;height:auto; }
hr {border-width:0.3px; border-color:#000; margin:8px 0;}
h1, h2, h3 {margin:0 0 0 0;}
h1 {text-transform: uppercase;}
h2 {font-size:20px;text-transform: uppercase;}
h3 {font-size:16px;}
div {font-size:15px;height:auto;}
p {margin:7px 0;}
.mb0 {margin-bottom:0px!important;}
.mb20 {margin-bottom:20px!important;}
.mt0 {margin-top:0px!important;}
.centered {
text-align:center;
}
.header {
text-align: center;
}
.header h1 {font-size:25px;}
.w40 {
float:left;
width:38%;
margin-left:2%;
margin:10px 0;
display:inline;
position:relative;
}
.w60 {
float:left;
width:58%;
margin-right:2%;
margin:10px 0;
display:inline;
position:relative;
}
.w100 {
float:left;
width:100%;
display:inline;
position:relative;
}
.logo {
width:75%;
padding:2px;
}
table td {
padding:3px 0;
}
.clearfix {
clear:both;
margin:0;
}
.sk h3{
margin-bottom:5px;
text-transform: uppercase;
}
label {
margin:0px 0 50px;
font-size:14px;
text-align: right;
font-weight: bold;
}
.tgl-sah {
position:absolute;left:77px;top:-5px;font-size:13px;color:#143754;font-weight:bold;
}
.w530 {
width:530px;
text-align: justify;
}
.sub-h3 {margin:7px 0;}
And here is HTML
<table class="tb-partai" cellspacing="0">
<tr>
<th>No.</th>
<th style="border-left:none;width:250px">partai Politik</th>
<th style="border-left:none;width:170px;">Struktur<br/>Kepengurusan</th>
<th style="border-left:none;width:170px">Kantor Pusat</th>
<th style="border-left:none;width:235px">Riwayat Permohonan</th>
</tr>
<?php
$no = 0;
foreach($partai->result_array() as $p) {
$no = $no + 1;
if($no % 2 == 1) {
echo "<tr style='background:#FFF'>";
} else {
echo "<tr style='background:#EFF1FF'>";
}
$sk_last = $this->db->select('*');
$sk_last = $this->db->order_by('id','desc');
$sk_last = $this->db->limit(1);
$sk_last = $this->db->get_where('rz_riwayat_parpol', array('id_parpol'=>$p['id']));
foreach($sk_last->result_array() as $sk) { ?>
<td class="t-center"><?php echo $no; ?>.</td>
<td style="border-left:none;width:265px">
<table>
<tr>
<td style="width:125px;"><img src="<?php echo base_url().'uploads/'.$sk['logo']; ?>"></td>
<td style="padding-left:5px;">
<?php echo "<h2>".$sk['nama_parpol']."</h2>";
echo "<p style='margin:3px 0'>".$sk['alias_parpol']."</p>";?>
<p style="margin:3px 0">Didirikan : <?php echo dateIndo(GetValue('rz_parpol',$sk['id_parpol'],'tgl_didirikan'));?></p>
<?php if($sk['status'] == "Berbadan Hukum") { ?>
<div style="width:165px;position:relative">
<img src="<?php echo base_url().'assets/images/bg-badanhukum.png'; ?>">
<span class="bdn-hukum" style="margin-left:45px"><?php echo dateIndo($sk['tgl_disahkan']);?></span>
</div>
<?php } ?>
</td>
</tr>
</table>
</td>
<td style="border-left:none;max-width:170px">
<table>
<tr>
<td>Ketua Umum</td><td> : </td><td><?php echo $sk['ketum']; ?></td></tr>
<tr>
<td>Sek. Jenderal</td><td> : </td><td><?php echo $sk['sekjend']; ?></td></tr>
<tr>
<td>Bend. Umum</td><td> : </td><td><?php echo $sk['bendum']; ?></td></tr>
<tr>
<td>Ketua MA</td><td> : </td><td style="width:90px;"><?php echo $sk['ketua_ma']; ?></td></tr>
<tr>
<td>Anggota MA</td><td> : </td><td></td></tr>
<tr>
<td colspan="3" style="width:185px"><table><?php echo anggota_ma($sk['anggota_ma'])."</table>"; ?></td></tr>
</table>
</td>
<td style="border-left:none;width:170px"><?php echo $sk['kantor_pusat']; ?></td>
<?php } ?>
<td style="border-left:none;width:350px;text-align:justify">
<?php $sk_partai = $this->db->get_where('rz_riwayat_parpol', array('id_parpol'=>$p['id']));
$nomor = 0;
foreach($sk_partai->result_array() as $skp) {
$nomor = $nomor + 1;
echo "<table>
<tr><td style='width:15px;padding-bottom:8px;'>".$nomor.".</td><td style='width:335px;padding-bottom:8px;line-height:20px'>
<b>".getValue('rz_srt_masuk', $skp['id_srt_permohonan'], 'no_kendali')."</b> - <span style='color:#323B7E;'>".dateIndo(getValue('rz_srt_masuk', $skp['id_srt_permohonan'], 'tgl_srt'))."</span> <br/>".getValue('rz_srt_masuk', $skp['id_srt_permohonan'], 'perihal')."</td></tr></table>";
} ?>
</td>
</tr>
<?php } ?>
</table>
Thanks

Related

Conditional table cell background color depending on value

I have a HTML table that I'm trying to change the cell background color to red depending on the value of the cell. Each cell will have a different threshold for when red is needed (one cell might be > 5, another > 10). The cells are sporadic throughout the table, and none are related to the other. Further, jquery is used to pull the value in from a value stored in a SharePoint list. Is there some way to check the value when it's pulled from the list and change the color before it's inserted in the table? Not sure what the best approach is for this. Thanks in advance for any help offered!
Table row code:
<tr>
<td colspan="3" style="width:30%; background-color:#015A78; color:White; text-align:center;
font-size:20pt; font-weight:bold; border-width:thick; border-style:inset"><div
id="subjectivehoverMouseover" title="">Subjective</div></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays"></div></td>
<td></td>
</tr>
And the jquery to pull in the value for SubjectiveDays in the last cell above:
if (listItem.Title === "subjectivegrading") {
$("#SubjectiveDays").text(listItem.c3t9 + " Business Days");
}
To go with one cell, using your example that I copied for two others, changing the ID, could look something like this:
let listItem = {};
listItem.Title = 'subjectivegrading';
listItem.c3t9 = 5;
if (listItem.Title === "subjectivegrading") {
$("#SubjectiveDays").text(listItem.c3t9 + " Business Days");
$("#SubjectiveDays").addClass('red');
}
listItem.c3t9 = 10;
if (listItem.Title === "subjectivegrading") {
$("#SubjectiveDays2").text(listItem.c3t9 + " Business Days");
$("#SubjectiveDays2").addClass('yellow');
}
listItem.c3t9 = 15;
if (listItem.Title === "subjectivegrading") {
$("#SubjectiveDays3").text(listItem.c3t9 + " Business Days");
$("#SubjectiveDays3").addClass('green');
}
.red {
color: red;
}
.yellow {
color: yellow;
}
.green {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays"></div></td>
<td></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays2"></div></td>
<td></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays3"></div></td>
<td></td>
</tr>
</table>
However, you would probably want to make a function to pass a cell's ID reference and the listItem.c3t9 value to apply the CSS in more helpful way, and that could look something like this:
let listItem = {};
listItem.Title = 'subjectivegrading';
listItem.c3t9 = 5;
function setElementCSS(elementRef, listItem) {
if (listItem.Title === "subjectivegrading") {
$('#' + elementRef).text(listItem.c3t9 + " Business Days");
addCSS = '';
if (listItem.c3t9 > 10) {
addCSS = 'green';
} else if (listItem.c3t9 > 5) {
addCSS = 'yellow';
} else {
addCSS = 'red';
}
$('#' + elementRef).addClass(addCSS);
}
}
setElementCSS('SubjectiveDays', listItem);
listItem.c3t9 = 10;
setElementCSS('SubjectiveDays2', listItem);
listItem.c3t9 = 15;
setElementCSS('SubjectiveDays3', listItem);
.red {
color: red;
}
.yellow {
color: yellow;
}
.green {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays"></div></td>
<td></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays2"></div></td>
<td></td>
<td style="background-color:Black; color:White; text-align:center; font-weight:bold; border-
style:inset"><div id="SubjectiveDays3"></div></td>
<td></td>
</tr>
</table>

How to align a table to the top of a container?

I embedded a PHP MySQL query inside a HTML div, but the result of the loop (the table) is aligned to the bottom. Is there any way to move the table to the top of the div? This is the code:
<div style="background-color:yellow; display:inline-table; float:left; max-width:90%; height:auto; text-align:top; left:0; right:0; margin:auto; position:absolute;">
<?php
$agent = $_COOKIE['user'];
$server = "*******";
$user = "*******";
$pass = "*******";
$baza = "balkandi_order";
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune nereusita");
$sql= "SELECT * FROM tab_order WHERE agent='$agent'";
$rezultat = mysqli_query($con, $sql);
echo '<table cellpadding="5" cellspacing="0" margin-top="0" max-width="0%" margin="auto" border="1px">';
echo '<tr><th>Data</th><th>Agent</th><th>Product</th><th>Quantity</th></tr>';
while ($row = mysqli_fetch_assoc($rezultat)) {
echo '<tr>';
echo '<td>';
echo $row['data'];
echo '</td>';
echo '<td>';
echo $row['agent'];
echo '</td>';
echo '<td>';
echo $row['product'];
echo '</td>';
echo '<td>';
echo $row['qty'];
echo '</td>';
echo '</tr>';
echo "<br>";
}
echo "</table>";
mysqli_close($con);
?>
</div>
If you don't care about learning how to improve, jump ahead to Step 3 and ignore the rest. I do encourage you to read the whole thing, though!
Step 1: Clean up
This code is a mess and will be a pain to change if you ever need to touch it again. Split it into pieces. First we extract the CSS:
style.css:
.container {
background-color: yellow;
display: inline-table;
float: left;
max-width: 90%;
height: auto;
text-align: top;
left: 0;
right: 0;
margin: auto;
position: absolute;
}
.container table {
max-width: 0;
border: 1px #000 solid;
border-collapse: collapse;
}
.container table td {
padding: 5px;
}
template.php:
<div class="container">
<table>
<tr>
<th>Data</th>
<th>Agent</th>
<th>Product</th>
<th>Quantity</th>
</tr>
<?php foreach ($tableEntries as $row): ?>
<tr>
<td><?php echo $row['data'] ?></td>
<td><?php echo $row['agent'] ?></td>
<td><?php echo $row['product'] ?></td>
<td><?php echo $row['qty'] ?></td>
</tr>
<?php endforeach ?>
</table>
</div>
index.php:
<?php
$agent = $_COOKIE['user'];
$server = "*******";
$user = "*******";
$pass = "*******";
$baza = "balkandi_order";
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune nereusita");
$sql= "SELECT * FROM tab_order WHERE agent='$agent'";
$rezultat = mysqli_query($con, $sql);
$tableEntries = array();
while ($row = mysqli_fetch_assoc($rezultat)) {
$tableEntries[] = $row;
}
include("template.php");
Looks much better, doesn't it? Everything has its place now and you can actually see what's happening.
Step 2: Fixing important issues
You are using MySQLi, which is good. But you are not using it correctly. You use a value from a cookie and hand it over directly to your database. That makes your application vulnerable to SQL injection attacks, because anybody can modify a cookie and put malicious code in there. So, let's fix this by using a prepared statement:
index.php:
<?php
// skipping the variable declarations (see above)
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune nereusita");
// prepare a statement with a placeholder for the agent variable
$stmt = mysqli_prepare("
SELECT data, agent, product, qty
FROM tab_order
WHERE agent = ?");
// now we set the value for the placeholder
$stmt->bind_param('s', $agent);
$stmt->execute();
$rezultat = $stmt->get_result();
$tableEntries = array();
while ($row = $result->fetch_assoc()) {
$tableEntries[] = $row;
}
include("template.php");
Step 3: Fixing the styling
Now that we have an overview of what you are doing, let's check why your table is aligned differently to what you want. Are you really sure that you need all of these CSS properties? I doubt it. From what I can see, you need almost none of it. But you have not provided any more information an where this is used, what is surrounding it and so on. Therefore, I might be completely wrong here. Anyway, let's adapt the stylesheet:
style.css:
.container {
background-color: yellow;
display: block;
float: left;
max-width: 90%;
margin: auto;
}
.container table {
border: 1px #000 solid;
border-collapse: collapse;
}
.container table td {
padding: 5px;
}
Step 4: Enlightenment
I hope you noticed how much difference it can make to actually take a moment to properly structure an application, even a small one. It allows you to clearly focus on problems rather than dealing with finding the right place to fix something. Also, please take some time to learn more details about the technologies you are using. In your original code there were quite a few incorrect elements like the non-existing HTML attribute max-width. It will make your life a lot easier, if you sit down to learn the basics.
Ok,
try
div {
background-color:yellow;
display:inline-table;
float:left;
max-width:90%;
height:auto;
text-align:top;
left:0;
right:0;
margin:auto;
position:absolute;
}
table th,
table td {
height:200px;
vertical-align: middle;
}
<div>
<table cellpadding="5" cellspacing="0" margin-top="0" max-width="0%" margin="auto" border="1px">
<tr>
<th>Data</th>
<th>Agent</th>
<th>Product</th>
<th>Quantity</th>
</tr>
<tr>
<td>
echo $row['data'];
</td>
<td>
echo $row['agent'];
</td>
<td>
echo $row['product'];
</td>
<td>
echo $row['qty'];
</td>
</tr>
<br>
</table>
</div>

Powerhsell + HTMl Formatting

I need some help here. I have the below Powershell code which I use to generate a HTML Table with Database Size and Names.
Now the output is good and everything looks better.. But sinew I have got over 500 Databases my boss has to scroll a lot to read the data,
I was thinking if there is a way I can put it in a column.
Something like this
Mbx001 MBX002 MBX003 MBX004
2.1 GB 3.2 GB 4.5 GB 10.8 GB
here is the power shell code
$dbreport = Generate-ReportHeader "dbreport.png" "$l_db_header"
$cells=#("$DB Name","Database Size")
$dbreport += Generate-HTMLTable "Database Overview" $cells
$databases = get-mailboxdatabase -status | sort
$currentDate = Get-Date
foreach ($database in $databases)
{
$dbname = $database.name
$dbserver = $database.server
$dbsize = $database.DatabaseSize
$pf = (Get-MailboxDatabase "$database" | get-mailbox -ResultSize Unlimited).count
$cells=#("$dbname","$dbsize")
$dbreport += New-HTMLTableLine $cells
$dbsizeges = $dbsizeges + $database.databasesize
$gespf = $gespf + $pf
$dbsizegb= $dbsize.Split(' ')[0]
$dbvalues += #{$dbname=$dbsizegb}
}
$dbreport += End-HTMLTable
$cells=#("DatabaseCount","Database Size","Database Overall Count")
$dbreport += Generate-HTMLTable "$l_db_summary" $cells
$anzdb = $databases.count
$cells=#("$anzdb","$dbsizeges","$gespf")
$dbreport += New-HTMLTableLine $cells
$dbreport += End-HTMLTable
new-cylinderchart 500 400 Database Name Size $dbvalues "$tmpdir\dbstat.png"
$dbreport += Include-HTMLInlinePictures "$tmpdir\dbstat.png"
$dbreport | set-content "$tmpdir\dbreport.html"
$dbreport | add-content "$tmpdir\report.html"
Here is the Functions File
#HTML Tables #-------------------------------------------------------------------------------------- # HTML Header function New-HTMLHeader ($title) { $HTMLHeader = "
<html>
<head>
<title>$title</title>
</head>
<body>
<div align=` "center`">
<table style=` "width: 90%; text-align: left; margin-left: auto; margin-right: auto; border-collapse:collapse; font-family:calibri;`" border=` "0`" cellpadding=` "0`" cellspacing=` "0`">
<tr>
<td style=` "background-color: `#0072C6; color: `#ffffff; font-weight: bold; border:solid `#0072C6; border-width: 3px 3px 3px 3px; width: 100px`">
<img src=` "cid:reportheader.png`" alt=` "picture`">
</td>
<td style=` "background-color: `#0072C6; color: `#ffffff; font-weight: bold; border:solid `#0072C6; border-width: 3px 3px 3px 3px; font-size: 20px`">Exchange Report</td>
</tr>
</table>
<table align=` "center`" cellspacing=` "0`" style=` "width: 80%`">
<td style=` "background-color: `#F8F8F8; color: `#585858;`">
Exchange Report for $orgname
<br>Exchange Reporter
<br>
</tr>
</td>
</table>
"#" return $HTMLHeader } # Table function Generate-HTMLTable ($headline, $cells) { $HTMLTable = "
<h3 style=` "text-align:center; font-family:calibri; color: `#0072C6;`">$headline</h3>
<table style=` "width: 80%; text-align: left; margin-left: auto; margin-right: auto; border-collapse:collapse; font-family:calibri;`" border=` "0`" cellpadding=` "0`" cellspacing=` "0`">
<tr>"#" foreach ($cell in $cells) { $HTMLTable += "
<td style=` "background-color: `#0072C6; color: `#ffffff; font-weight: bold; border:solid `#0072C6; border-width: 3px 3px 3px 3px;`">$cell</td>" } $HTMLTable += "</tr>" return $HTMLTable } # New Table function New-HTMLTableLine ($cells) { $NewTableLine = "
<tr>" foreach ($cell in $cells) { $NewTableLine += "
<td style=` "background-color: `#F8F8F8; color: `#585858; border:solid `#0072C6; border-width: 1px 1px 1px 1px;`">$cell</td>" } $NewTableLine += "</tr>" return $NewTableLine } # Table function End-HTMLTable () { $TableEnd = "</table>" return $TableEnd } # HTML End function End-HTML () { $HTMLEnd = "
</body>
</html>
" return $HTMLEnd } # HTML Inline Pictures function Include-HTMLInlinePictures ($picid) { $htmlreport = "
<table align=` "center`" cellspacing=` "0`" style=` "width: 80%`">
<tr>
<td>
<center>
" $Pics = Get-ChildItem "$picid" -name Foreach ($pic in $Pics) { $htmlreport += "
<img src=` "cid:$pic`" alt=` "picture`">" } $htmlreport += "
</center>
</tr>
</td>
</table>
" return $HTMLReport } # Report Header function Generate-ReportHeader ($Image, $Headline) { $ReportHeader = "
<br>" $ReportHeader += "
<table style=` "width: 90%; text-align: left; margin-left: auto; margin-right: auto; border-collapse:collapse; font-family:calibri;`" border=` "0`" cellpadding=` "0`" cellspacing=` "0`">" $ReportHeader += "
<tr>
<td style=` "background-color: `#0072C6; color: `#ffffff; font-weight: bold; border:solid `#0072C6; border-width: 3px 3px 3px 3px; width: 100px`">
<img src=` "cid:$image`" alt=` "picture`">
</td>
<td style=` "background-color: `#0072C6; color: `#ffffff; font-weight: bold; border:solid `#0072C6; border-width: 3px 3px 3px 3px; font-size: 20px`">$headline</td>
</tr>
</table>
" #" return $ReportHeader } # Report Footer function Generate-ReportFooter () { if ($language -match "DE") { $footer = "
<table align=` "center`" cellspacing=` "0`" style=` "width: 80%`">
<tr>
<td style=` "background-color: `#F8F8F8; color: `#585858;`">
Exchange Reporter $reporterversion
<br>
</td>
</tr>
<tr>
<td style=` "background-color: `#F8F8F8; color: `#585858;`">
<center>
<hr>Spenden Sie etwas für die Weiterentwicklung, wenn Ihnen Exchange Reporter gefällt:
<br>
</center>
</td>
</tr>
</table>
"#" return $footer } else { $footer = "
<table align=` "center`" cellspacing=` "0`" style=` "width: 80%`">
<tr>
<td style=` "background-color: `#F8F8F8; color: `#585858;`">
</td>
</tr>
<tr>
<td style=` "background-color: `#F8F8F8; color: `#585858;`">
<center>
<hr>
</center>
</td>
</tr>
</table>
"#" return $footer } }

printing in CSS second page

I keep on searching about this but i didn't find an answer..
I want to print my website page, so i used the margin-top and margin-bottom but it only affected the first sheet.. In the second page, there is no margin on top.. is there a way to do this..
Here is the sample image i am talking about.
Here is the code that I am using. Please help.
<style type="text/css">
.printOnly {
margin-top: 75px;
display: none;
page-break-inside: avoid;
}
.textSummaryTable { page-break-inside:avoid;}
.textSummaryTable tr { page-break-inside:avoid; page-break-after:auto }
#media print {
.summaryTable { page-break-inside: avoid; }
.summaryTable tr:nth-child(odd){ background-color:#E1E4E5; }
.summaryTable tr:nth-child(even) { background-color:#ffffff; }
.printOnly {
display: block;
}
.panel {
border: 1px solid transparent;
padding: 2px;
margin: 0;
}
.textSummaryTable{
border:1px solid gray;
page-break-inside: avoid;
}
.textSummaryTable td{
border:1px solid gray;
page-break-inside: avoid;
}
#main {
overflow: hidden;
position: absolute;
padding: 0px;
height: auto;
width: 100%;
}
#title {
display: none;
}
#line-break {
display: block;
}
.textSummaryTable {
width: 100%;
}
}
#media screen {
#line-break {
display: none;
}
}
</style>
<?php
$this->pageTitle = Yii::app()->name . ' - View Evaluation';
$user = LoginForm::getUser();
?>
<?php
$participants = $modelE->evaluationDetails;
?>
<style type="text/css">
#media print {
body {
overflow: hidden;
}
}
</style>
<div class=" non-printable">
<div class='pull-right non-printable'>
<button id="btnPrint" type="button" class="btn btn-default pull-right" onclick="window.print();">
<span class="glyphicon glyphicon-print"></span> Print
</button>
</div>
<?php
$startDate = date("M j, Y", strtotime($modelE->start_date));
$endDate = date("M j, Y", strtotime($modelE->end_date));
?>
</div>
<div id='line-break'>
<br>
<br>
<br>
</div>
<div class="container-fluid">
<div class="printable">
<h4><?php echo htmlentities($modelE->evaluationForm->name); ?></h4>
<h5><?php echo $startDate; ?> - <?php echo $endDate; ?></h5>
<h5>Candidate: <?php echo htmlentities($modelE->evaluatee); ?></h5>
<h5>Overall Evaluation: <?php echo htmlentities($modelE->getResult()); ?></h5>
<h5>Participants: <?php echo htmlentities(count($participants)); ?></h5>
<div class="panel panel-default">
<div class="panel-body">
<h5><strong>Instructions: </strong> <?php echo htmlentities($modelE->evaluationForm->description); ?></h5>
<!-- <h4>Results Summary</h4> -->
<?php
$radioFlag = false;
foreach ($modelE->evaluationForm->evaluationFormDetails as $question) {
$criteria = new CDbCriteria;
$criteria->with = 'evalResult';
$criteria->addInCondition('eval_form_question_id', array($question->id));
$criteria->addInCondition('evalResult.eval_id', array($modelE->id));
$resultSet = EvaluationResultsDetails::model()->findAll($criteria);
if ( strtolower($question->field_type) != "radioheader" && $question->field_type != "slider" ) {
if($radioFlag){
echo "</table>";
$radioFlag = false;
}
if( $question->field_type == "text" ) {
echo "<h4>" . $question->field_name . "</h4>";
}
else {
echo "<table class='textSummaryTable'><tr><td style='width: 100%'><label>" . $question->field_name . "</label></td></tr>";
foreach ($resultSet as $answer) {
echo "<tr><td>" . $answer->eval_answer . "</td></tr>";
}
echo "</table>";
}
} else {
if(!$radioFlag){
echo '<table border-size = 0px width=100% class="summaryTable">';
$radioFlag = true;
}
echo "<tr><td style='width: 90%'>" . $question->field_name . "";
echo "</td><td style='width: 10%'>";
$sum = 0;
$count = 0;
foreach ($resultSet as $answer) {
$count++;
$sum += $answer->eval_answer;
}
echo $count == 0 ? "-" : number_format($sum / $count, 2);
echo "</td></tr>";
/*** end here ***/
}
}
if($radioFlag){
echo "</table>";
}
?>
<table class="printOnly">
<tr>
<td colspan="2">
<p> I hereby certify that all information declared in this document are accurate and true. Each item have been discussed with my Immediate Superior and mutually agreed upon.</p>
</td>
</tr>
<tr>
<td>
<p>Prepared by
<?= $modelE->project->manager->family_name . ", " . $modelE->project->manager->first_name ?>
</p>
Date <?= date("Y-m-d"); ?>
</td>
<td>
<p>Conformed by <?= $modelE->evaluatee ?></p>
Date
</td>
</tr>
<tr>
<td colspan="2">
<p>Noted by HR Division</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>

Inconsistent CSS Table displaying (Using SQL & PHP)

I've run into the problem that when I echo information Into a table using PHP and HTML from the database the information moves depending on how it loads.
By this I mean if I constantly refresh everything will be different to how it previously was. I mean how it is displayed not what is displayed.
.tracklist {
}
.tracklist img {
max-width:15%;
max-height:15%;
}
.tracklist td{
width:36%;
display:block;
padding:1%;
text-align:center;
}
#content {
width:98%;
height:73%;
padding-left:1%;
padding-right:1%;
background-color:#d8d8d8;
text-align:center;
}
#contentbox {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-align:center;
background-color:#999999;
}
<div id="content">
<div id="contentbox">
<br />
<table class="tracklist">
<?php
$i = 0; $trEnd = 0;
while ($row = mysql_fetch_array($result)){
if($i == 0){
echo '<tr>';
}
echo '<td>';
echo $row["genre"]." | ".$row["artist"]." | ".$row["name"];
echo '<br />';
echo "<img src=".$row["image"].' />';
echo '</td>';
if($i == 2){
$i = 0; $trEnd = 1;
}else{
$trEnd = 0; $i++;
}
if($trEnd == 1) {
echo '</tr>';
}
}
if($trEnd == 0) echo '</tr>';
?>
</table>
</div>
</div>
The data from the database is called in the header just so people know that it is called.
Fixed this by putting width:100%; in the class which it inherited the height from.
Seems to of fixed it for now.