I have two tables. One is created with html (and a little bit of php) while the other is created by two php-loops.
First of all, the stylesheet:
.statistics {
font-family: Arial, monospace;
font-size: 36px;
margin-left: 5%;
width: 90%;
}
.statistics tr {
line-height: 50px;
}
.statistics th {
text-align: center;
}
.statistics td {
text-align: center;
}
button {
margin-left: 25%;
width: 50%;
height: 40px;
border: none;
border-radius: 20px;
font-family: Arial, monospace;
font-size: 20px;
}
The following table is aligned properly:
<table class="statistics">
<tr>
<th>Benutzer</th>
<th>Artikel</th>
<th>Reservierungen</th>
</tr>
<tr>
<td><?php echo $client->statistic_getAmount();?></td>
<td><?php echo $articles->statistic_getAmount();?></td>
<td><?php echo $reservations->statistic_getAmount();?></td>
</tr>
<tr>
<th>Seiten (.php)</th>
<th>Datenbankeinträge</th>
<th>Zeilen mit Code</th>
</tr>
<tr>
<td>18</td>
<td>27</td>
<td>4407+</td>
</tr>
</table>
While this one isn't aligned properly:
<form method="post" action="webinterface.php" class="perms">
<table class="statistics">
<tr>
<th>Benutzer</th>
<?php
foreach ($permgroupa as $group) {
echo "<th>".$group."<th>";
}
echo "</tr>";
$users = $client->getUsers();
while ($row = mysqli_fetch_assoc($users)) :?>
<tr>
<td><?php echo $row['username'];?></td>
<?php foreach ($permgroupa as $group) : ?>
<td><input type="checkbox" name="<?php echo $group;?>-<?php echo $row['username'];?>" <?php if ($perms->hasPermission($row['username'], $group)) {echo "checked";}?>></td>
<?php endforeach;?>
</tr>
<?php endwhile;?>
</table><button type="submit" class="btnalter" name="alterrights">Rechte aktualisieren</button></form>
The tables in action
Does someone know, why they align in different ways?
1 - don't put your table inside a form
2 - the number of columns is not the same for the first and the second table
I am having a php table which contains information about billing of certain numbers. After generating this table I export it in pdf using mpdf.
If the table has a certain number of rows it breaks the page in a weird way, leading the headers repeat on the next page with no rows.
Here is the format of the table:
The table contains up to 3 headers inside <thead> tags, like this:
<table class="items" width="100%" style="font-size: 9pt; border-collapse: collapse;" cellpadding="8">
<thead>
<tr>
<td width="30.3%">Forbrug</td>
<td width="23.1%">Periode</td>
<td width="10.76%">Tid/MB</td>
<td width="9.28%">Enheder</td>
<td width="12.9%" align="right">I alt</td>
<td width="13.3%" align="right">I alt+<b>moms</b></td>
</tr>
</thead>
rows are added in a while from the database in this way.. nothing special
<tr>
<td>'.$produktNameFromDatabase.'</td>
<td>'.$periodeFromDatabase.'</td>
<td>'.$tidMbFromDatabase.'</td>
<td>'.$enhederFromDatabase.'</td>
<td align="right">'.number_format((float)$produktpris, 2, ',', '.').' kr.</td>
<td align="right"><b>'.number_format((float)$produktpris*(1 + (0.25 * $moms)) - $momsDiscount, 2, ',', '.').' kr.</b></td>
</tr>
with the total lines at the end
<tr>
<td class="blanktotal" colspan="1" rowspan="6"></td>
<td class="blanktotal" colspan="1" rowspan="6"></td>
<td class="totals" colspan="2">Subtotal:</td>
<td class="totals" colspan="2">'.number_format((float)$pris1, 2, ',', '.').' kr.</td>
</tr>
<tr>
<td class="totals1" colspan="2">Moms:</td>
<td class="totals1" colspan="2">'.number_format((float)$pris1*(0.25 * $moms) - $momsTotal, 2, ',', '.').' kr.</td>
</tr>
<tr>
<td class="totals1" colspan="2"><b>TOTAL:</b></td>
<td class="totals1" colspan="2"><b>'.number_format((float)$pris1*(1 + (0.25 * $moms)) - $momsTotal, 2, ',', '.').' kr.</b></td>
</tr>
</tbody>
</table>
!!! EVERYTHING that you have seen by now, including the totals are a part of the table!
Here is the mpdf settings that I have:
In PhP:
$mpdf=new mPDF('win-1252','A4','','',20,15,48,25,10,10);
$mpdf->useOnlyCoreFonts = true; // false is default
$mpdf->SetProtection(array('print'));
$mpdf->SetTitle("Suggestive Title");
$mpdf->SetAuthor("Author");
$mpdf->SetWatermarkText("Faktura");
$mpdf->showWatermarkText = true;
$mpdf->watermark_font = 'DejaVuSansCondensed';
$mpdf->watermarkTextAlpha = 0.1;
$mpdf->SetDisplayMode('fullpage');
In HTML:
$html .= '<!--mpdf
<htmlpageheader name="myheader">
<table width="100%"><tr>
<td width="50%" style="color:#000000;">
<span style="font-weight: bold; font-size: 14pt;">
Company Name
</span>
Company Information
</td>
<td width="50%" style="text-align: right;">
<img src="image.jpg" />
Invoice Information <br />Side: {PAGENO} af {nb}
</td>
</tr></table>
</htmlpageheader>
<htmlpagefooter name="myfooter">
<div style="border-top: 1px solid #000000; font-size: 9pt; text-align: center; padding-top: 3mm; ">
Footer Stuff
</div>
<div style="font-size: 9pt; text-align: center;">
Other Footer Stuff
</div>
</htmlpagefooter>
<sethtmlpageheader name="myheader" value="on" show-this-page="1" />
<sethtmlpagefooter name="myfooter" value="on" />
mpdf-->';
Some styling that I use
body {font-family: sans-serif;
font-size: 10pt;
}
p { margin: 0pt;
}
td { vertical-align: top; }
.items td {
border-left: 0.1mm solid #000000;
border-right: 0.1mm solid #000000;
}
table thead td { background-color: #d4ffaa;
border: 0.1mm solid #000000;
}
.items td.blanktotal {
background-color: #FFFFFF;
border: 0mm none #000000;
border-top: 0.1mm solid #000000;
border-right: 0.0mm solid #000000;
}
.items td.totals {
text-align: right;
border-top: 0.1mm solid #000000;
border-right: 0.0mm solid #000000;
border-left: 0.0mm solid #000000;
}
.items td.totals1 {
text-align: right;
border-top: 0.0mm solid #000000;
border-right: 0.0mm solid #000000;
border-left: 0.0mm solid #000000;
}
The result looks something like this:
This issue occurs only when the number of rows fills the page. If it overflows it is no major issue, because the table headers are still there on the next page (all of them unfortunately, not only the last one) and the rest of the rows are added further.
How can I get rid of those empty rows, in this special case?
Thank you!
!!EDIT: Added more information, code and a better image of the case. Sorry for not doing it at the first time!
!!EDIT #2: I just observed on other examples that had more than 1 page of rows that the <thead>s keep their position on next pages. It happens all the time. Is there a way to disable that so that other <thead>s will just continue on the next page from the top of the page without remembering the position from the previous page?
You need to set headers (and footers) in individual strings, like this:
require_once __DIR__ . '/../vendor/autoload.php';
$stylesheet = '
.table-header{
border: none;
background-color: yellow;
width: 100%;
}
.table-header td{
border-right: 1px solid;
}
.table-body{
border: none;
background-color: transparent;
width: 100%;
}
.table-body td{
border-right: 1px solid;
border-bottom: 1px solid;
}
.table-footer{
border: none;
background-color: transparent;
width: 100%;
}
.table-footer .td-number{
text-align: right;
}
';
/* Sample data */
$html = '<table class="table-body">';
for ($i = 1; $i <= 100; $i++) {
$html.='<tr>
<td width="30.3%">Forbrug '.$i.'</td>
<td width="23.1%">Periode '.$i.'</td>
<td width="10.76%">'.$i.' MB</td>
<td width="9.28%">Val '.$i.'</td>
<td width="12.9%" align="right">I alt '.$i.'</td>
<td width="13.3%" align="right"><b>moms</b> '.$i.'</td>
</tr>';
}
$html.= '</table>';
$header = '<table class="table-header"><tr>
<td width="30.3%">Forbrug</td>
<td width="23.1%">Periode</td>
<td width="10.76%">Tid/MB</td>
<td width="9.28%">Enheder</td>
<td width="12.9%" align="right">I alt</td>
<td width="13.3%" align="right">I alt+<b>moms</b></td>
</tr></table>';
$footer = '<table class="table-footer"><tr>
<td>Footer here</td>
<td class="td-number"><b>Page N. {PAGENO}</b></td>
</tr></table>';
$mpdf = new mPDF('c','A4','','',15,15,18,15,10,5);
$mpdf->mirrorMargins = 1;
/* Declare headers */
$mpdf->SetHTMLHeader($header);
$mpdf->SetHTMLHeader($header,'E');
/* Declare footers */
$mpdf->SetHTMLFooter($footer);
$mpdf->SetHTMLFooter($footer,'E');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html);
$mpdf->Output();
I eventually found a solution. Best way to get rid of these things is to replace <thead> tags with <th>. <thead> has a predefined style which makes the table header repeat itself on every page. <th> will make the header stop repeating itself on the next pages (fortunate or unfortunate), but it will eliminate the space caused by the <thead>'s style
i'm using woocommerce and wpml for my web-shop and it works great. But i just installed the "Print Invoices & Packing lists" plugin to print invoices. But i have two issues with the plugin and the translation (or lack of it..)
The domain is detected and the strings.. but not the actual content...
So all my invoices are in english. Not really a problem but it would be nice if the translation would work.
Now the big issue. I can live with the fact that my invoices is in english but the currency don't switch... it looks fine in backend/dashboard data but when i want to print.. my base currency symbol shows in the invoice. this causes a big problem because the amount don't change accordingly 1€ becomes 1SEK (the exchange rate is 0,11)!
I cant find any settings and i have even been in the plugin code to look for a solution.
Note: I have also contacted WooTheme and wpml at there support. They haven't answered me yet.
is there nay PHP code snippet like get_order_currency(); ?>
or some other way to define the order currency?
Here is the code that generate the product prices. (only problem part*)
<?php if ( $action == 'print_invoice') : ?>
<table>
<thead>
<tr>
<th scope="col" style="color: #fff; border: 1px solid #FFFFFF; text-align:left; width: 15%; background-color:#00cc00; padding: 3px;"><?php _e('SKU', 'woocommerce-pip'); ?></th>
<th scope="col" style="color: #fff; border: 1px solid #FFFFFF; text-align:left; width: 30%; background-color:#00cc00; padding: 3px;"><?php _e('Product', 'woocommerce-pip'); ?></th>
<th scope="col" style="color: #fff; border: 1px solid #FFFFFF; text-align:left; width: 25%; background-color:#00cc00; padding: 3px;"><?php _e('Quantity', 'woocommerce-pip'); ?></th>
<th scope="col" style="color: #fff; border: 1px solid #FFFFFF; text-align:left; width: 10%; background-color:#00cc00; padding: 3px;"><?php _e('A Price', 'woocommerce-pip'); ?></th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3" scope="row" style="text-align:right;"><?php _e('Moms(25%):', 'woothemes'); ?></th>
<td style="text-align:left;"><?php echo woocommerce_price($order->get_total_tax()); ?></td>
</tr>
<?php foreach ( $order->get_order_item_totals() as $key => $total ) : ?>
<tr>
<th colspan="3" scope="row" style="text-align:right;"><?php echo $total['label']; ?></th>
<td style="text-align:left;"><?php echo $total['value']; ?></td>
</tr>
<?php endforeach; ?>
First post and new to jQuery. Looked hard but did not find a fully relevant post.
Have alternating row colours in a table; one class NULL/empty one class=alt. jQuery script partially works to highlight the row when clicked.
Question is: how do you use removeClass and then restore (addClass/toggleClass) the specific class that was removed on an onChange event? Any help appreciated. Tks. (See Fiddle below)
HTML
<table id="fooBar" border="0">
<tr>
<th>Text</th>
<th>Text</th>
<th>Text</th>
<th></th>
<th></th>
</tr>
<tr class="">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="alt">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="alt">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
</table>
CSS
table {
width:100%;
border-collapse:collapse;
table-layout:auto;
vertical-align:top;
margin-bottom:15px;
border:1px solid #999999;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #F2EDEB;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #522D25 url(images/bg_header.jpg) no-repeat;
}
tr {
background: #fff;
color: #261F1D;
}
tr:hover, tr.alt:hover {
color: #261F1D;
background-color: #E5C37E;
}
.highlighted {
color: #261F1D;
background-color: #E5C37E;
}
tr.alt {
background: #F5FAFA;
color: #B4AA9D;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
padding: 6px 6px 6px 12px;
}
jQuery
$(document).ready(function () {
$("tr").click(function () {
$(this).closest("tr").siblings().removeClass("highlighted");
$(this).toggleClass("highlighted");
})
});
// Note: currently only works for row without '.alt' css class assigned (ie. empty)
// question is how to replace a class and then RESTORE the class onChange
Here is the jsFiddle: http://jsfiddle.net/codeChaos1988/kh4VY/1/
Also any pointers on best tutorial sites for actually learning to program in javascript/jQuery would be appreciated as well.
Thank you for your help in advance.
So that you don't have to worry about removing/restoring the original class, try changing your css to:
.highlighted {
color: #261F1D !important;
background-color: #E5C37E !important;
}
For JS:
$('table').on('click', 'tr', function () {
var state = $(this).hasClass('highlighted');
$('.highlighted').removeClass('highlighted');
if ( ! state) { $(this).addClass('highlighted'); }
});
Added this in datatable initialisation section:
"createdRow": function( row, data, index ) {
if (tableInitialized){
flashRow( row );
}
This worked!
<tr>
<td class="mHeads" rowspan="4" > GENERAL </td>
<th class="subHeads"> 2G Network </th>
<td class = "currentSel"><?php echo $row["2GNetwork"];
</td>
</tr>
.currentSel {
width:230px;
border:1px solid black;
max-width:230px;
height: 35px;
}
In the above code, the echo statement is overflowing the data rather than adding increasing the length of the row. Can anyone help me how to fix it without using the overflow property?
.currentSel {
width:230px;
border:1px solid black;
max-width:230px;
height: 35px;
overflow-y: auto
}
Already you have used width and height so, there is no way to get the extra space, only thing you can do is add overflow-y: auto or remove width or height.