I have a mPDF output that essentially includes a table that is page-breaking in an unfortunate place.
The table is made up of a thead section, followed by several tbody's that each have a group-header row followed by detail rows - but the page break is leaving the group-header-row "orphaned" (or is it "widowed"). The problem isn't so much that the table is being broken, it's that it's only showing one row in the group before breaking.
Initially I thought of putting in page-break-inside:avoid on the css for the tbody, but this does not work (it "works" on the table but not on the tbody).
Another option would be to break each section into their own table, but this would lead onto column width inconsistencies that I would like to avoid.
Is there a way to stop mPDF from leaving too few widows/orphans? (I want to have at least two (or three) rows of each tbody showing but it would be nice to set this as an option**).
<?php
include_once('MPDF56_1/mpdf.php');
class Test {
public function doTest() {
$css=/**#lang CSS */"
table {
width:100%;
border:solid 1px grey;
}
th, td {
text-align:left;
padding:4px;
}
th {
background-color:#d1dce1;
}
.grouphead {
background-color:#e2e2e2;
}
";
$table="<table>";
$table.="<thead>";
$table.="<tr><th>Some header</th></tr>";
$table.="</thead>";
for($tb=1; $tb<=3; $tb++) {
$table .= "<tbody>";
$table.="<tr><td class='grouphead'>Group $tb Header</td></tr>";
for ($i = 1; $i < 34; $i++) {
$table .= "<tr><td class='detail'>Some data $tb.$i</td></tr>";
}
$table.="</tbody>";
}
$table.="</table>";
$head="<head><style>$css</style></head>";
$body="<body>$table</body>";
$mpdf = new mPDF('', 'A4');
$mpdf->WriteHTML("<html>$head$body</html>");
$mpdf->Output();
}
}
$try = new Test();
echo $try->doTest();
?>
(I'm using PHP7 & mPDF5.6 currently but can upgrade if newer versions have this function)
** e.g. ;
Related
I am trying to get my table to alternate colors but I am having some difficulty.
if ($i % 2 == 0)
$color = "grey";
else
$color = "white"; $i++;
$table .= "<tr style=backround-color=$color>";
This does not work. I have tried this as well but it did not work either.
$table .= "<tr:nth-child(even) {background: #CCC}; tr:nth-child(odd) {background: #FFF}; >";
You misspelled background and you don't use = in CSS, you use :. I also added quotes around your attribute values as it is best practice:
$table .= "<tr style='background-color:$color'>";
The last line in your question isn't even close to valid HTML or CSS. Looks kinda neat though.
I found an interesting link here that does what you are looking for. I put the code from the link into a jsfiddle and here is the css styles that I got from the link:
.TFtableCol{
width:100%;
border-collapse:collapse;
}
.TFtableCol td{
padding:7px; border:#4e95f4 1px solid;
}
/* improve visual readability for IE8 and below */
.TFtableCol tr{
background: #b8d1f3;
}
/* Define the background color for all the ODD table columns */
.TFtableCol tr td:nth-child(odd){
background: #b8d1f3;
}
/* Define the background color for all the EVEN table columns */
.TFtableCol tr td:nth-child(even){
background: #dae5f4;
}
Basically I am createing a unknown size of checkboxs that is dependent on the row that is chosen from a table in my database. The reason I dont know the size is that the user chooses which row they will use with some rows containing what will become 10 checkboxs adn others containing as many as 75. So the problem is that if the user selects a row with a large amount of options it goes through the border of my div and then forces me to scroll the page down what I am looking for is a way to say >
if(number of checkboxs is >25 )
create a new column on my page
I dont know whether the right way to go about this is to use php or javascript or possibly do it using css I am new to all of these languages so any help no matter how trivial will greatly appreciated.
<div id="major1">
<?php
$courses=mysql_query("SELECT * FROM MAJORS_CHECKLIST WHERE MAJOR='$major'");
$courses_row=mysql_fetch_row($courses);
$count = 0;
echo "$courses_row[0] <br/>";
$checkit = 0;
$sidebyside = 0;
foreach($courses_row as $i=>$courses_row){
if($courses_row['$count'] == NULL)
{
break;//if we run out of courses stop printing them
}
if($courses_row[$count] == $courses_row[0] && $checkit == 0 )
{
$checkit = $checkit + 1;
}
else
{
echo "<input type='checkbox' value='$courses_row' name='majorCourses[]' /> ";//answer-$i
echo "$courses_row<br /> ";
}
$count = $count + 1;
/*$sidebyside++;
if($sidebyside == 2)//tried using this to put 2 checkboxes side by side that ened up just messing everything up
{
echo "<br/>";
$sidebyside = 0;
}*/
}
?>
here is my css:
#major1{
color: white;
/*border: 1px solid black;*/
padding: 5px;
float: left;
height:500px;
width:150px;
}
Producing a bunch of checkboxes in the div can be controlled using CSS. Should set the parent div of the checkboxes to the following rules: width:auto; height:auto; padding:10px 10px; position:relative; This is all assuming that the parent div of the checkboxes is a child of another div to control the preferred dimensions
edit: if you do not want to want to use css with the methods above, you can control the "X" amount of checkboxes per row. You can create a counter to count how many are being displayed and do a if($counter % X == 0) echo "</div><div>"; This is all assuming you have a starting div at the beginning of your code and an ending div at the end of the code.
hello i am working on the styling of table in PHP . I am stuck at only one point that i am not able to to change the colors of the rows of my table alternatively like odd rows should be displayed with white background and even with blue . i trie the followng css code but it didnot worked
tbody:nth-child(2n) { /* even rows */
background-color:#eee;
}
tbody:nth-child(2n+1) { /* odd rows */
background-color:#ccc;
}
If it is not because of your browser issue, please try this for css
table#tableid tr:nth-child(2n) { /* even rows */
background-color:#eee;
}
table#tableid tr:nth-child(2n+1) { /* odd rows */
background-color:#ccc;
}
OR
table#tableid tr:nth-child(even) { /* even rows */
background-color:#eee;
}
table#tableid tr:nth-child(odd) { /* odd rows */
background-color:#ccc;
}
i think jquery :even and :odd selector is the best option for cross browsers..
$('#selector:even').addClass('even_class');
$('#selector:odd').addClass('odd_class');
Write two classes to for the styles of odd and even rows. And add the class alternately like this.
.odd_row{
background-color:grey;
}
.even_row{
background-color:white;
}
And in php,
<?php
for($i=0;$i<10;$i++)
{?>
<tr class="<?php echp ($i%2==0)?'odd_row':'even_row';?>">
<td>data1</td>
<td>data2</td>
</tr>
<?php
}
?>
Perhaps you could try using a variable to change which style is used. So when you start the block, you define oddOrEven as 0, then you echo a row, then you set oddOrEven to 1. Every time a row is echoed, it changes which class is used based on oddOrEven.
I am wondering if it's possible to create a grid-like layout using div's that are dynamically created using PHP.
I am creating a product page that will display all products in a PHP database. I want each product to be housed in a div, and 3 divs to display in a row with as many rows as needed to get through all the products.
Something like this:
div div div
$row['product1'] $row['product2'] $row['product3']
div div div
$row['product4'] $row['product5'] $row['product6']
I would prefer not to use a table. I know how to line divs up using the float and clear properties, but not if they are all being created in a while statement, which makes me think it might not be possible.
So I guess, is this possible without using tables, or should I just stick with that?
This can be done the way you ask, though it isn't the best way. It's entirely possible to identify the <div> positions within columns in a while loop:
// Looping over your results simplified...
$i = 1;
while ($results) {
if ($i % 3 == 1) {
$div_class = 'left';
}
else if ($i % 3 == 2) {
$div_class = 'middle';
}
else {
$div_class = 'right';
}
$i++;
// output, simplified
echo "<div class='$div_class'>$row_contents</div>";
}
Then use your CSS to float and clear as necessary for the left, middle, right classes.
.left, .middle, .right {
float: left;
}
.left { clear: left; }
.right { clear: right; }
However,
Given all of this, I still probably wouldn't bother with <div>s. Semantically if this is a list of products, you should be listing them in <li> tags. Then just style the <li> to float: left; and make each one 33% the width of the container so you get 3 per line.
On a website I am working on as a project I have a table which has 3 columns,
Column 1: Artist
Column 2: Times Played this week
Column 3: Previous Plays
Then problem with this is that the table is very long and it takes a little while to scroll to the bottom (well, more time than the user will give).
I want it to be in this layout and have 6 columns, or two seperate tables:
Column 1: Artist
Column 2: Times Played this week
Column 3: Previous Plays
(little space to break the 3 columns each side up)
Column 4: Artist
Column 5: Times Played this week
Column 6: Previous Plays
The link to page with the current table is below:
LINK
The PHP code im using top generate the table and its contents is:
<?php
$xml_data = file_get_contents('http://www.bbc.co.uk/programmes/music/artists/charts.xml');
$xml = new SimpleXMLElement($xml_data);
?>
<table>
<th>Artist</th>
<th>Times played this week</th>
<th>Previous plays</th>
<?php
foreach ($xml->artists->children() as $child)
{
echo "<tr>";
$artist = (string)$child->name;
echo "<td>$artist</td>";
$playedweek = (string)$child->plays;
echo "<td>$playedweek</td>";
$previousplays = (string)$child->previous_plays;
echo "<td>$previousplays</td>";
echo "</tr>";
}?>
</table>
The CSS I am using for the table is:
table {
text-align: center;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #6D929B;
}
I have tried to include all the necessary code that you may need. If im missing something ill add it upon request.
How can I achieve what I described above?
If you have an option to replace table with any other element then:
Render the info as a list and then give the li elements a float with left as the value and the width as 16.6%
e.g:
<?php
$xml_data = file_get_contents('http://www.bbc.co.uk/programmes/music/artists/charts.xml');
$xml = new SimpleXMLElement($xml_data);
?>
<ul>
<li>Artist</li>
<li>Times played this week</li>
<li>Previous plays</li>
<li>Artist</li>
<li>Times played this week</li>
<li>Previous plays</li>
<?php
foreach ($xml->artists->children() as $child)
{
$artist = (string)$child->name;
echo "<li>$artist</li>";
$playedweek = (string)$child->plays;
echo "<li>$playedweek</li>";
$previousplays = (string)$child->previous_plays;
echo "<li>$previousplays</li>";
}?>
</ul>
CSS:
li
{
float: left;
width: 16.6%;
}
Sample HTML #: http://jsfiddle.net/yT6P5/
Two tables! Find the length of your table (say 221), divide by two and round, (111... depending on which rounding method you use), and at that number insert some html to end the first table and start a second one:
if (#counter == 111) {
echo "</table>";
echo "<table>";
echo " <tr>";
echo " <th>Artist</th>";
echo " <th>Times played this week</th>";
echo " <th>Previous plays</th>";
echo " </tr>";
}
Modify your CSS a little to get the table besides each other with the desired spacing:
table {
text-align:center;
float:left;
margin-right:2em;
}
And you should be set.