How to find table with style? I know it have style attr:
style="border: 1px solid #aaaaaa; border-collapse: collapse; width: 600px; background: #ffffff; text-align: center; margin-top: 10px;"
but how to use it with "find"?
I tried:
$scrap['content']->find('table[style*=border: 1px solid #aaaaaa; border-collapse: collapse; width: 600px; background: #ffffff; text-align: center; margin-top: 10px;]');
but its not working
It works for me:
require_once('simple_html_dom.php');
$html = <<<EOF
<table>foo</table>
<table style="border: 1px solid #aaaaaa; border-collapse: collapse; width: 600px; background: #ffffff; text-align: center; margin-top: 10px;">bar</table>
EOF;
$doc = str_get_html($html);
echo $doc->find('table[style*=border: 1px solid #aaaaaa; border-collapse: collapse; width: 600px; background: #ffffff; text-align: center; margin-top: 10px;]', 0)->text();
//=> bar
Related
I want PDF separate html(invoice.html) page using DomPDF library,
but when I generating html file to PDF its throwing error like: it would throwing error regarding style sheet.
'DOMXPath::query(): Invalid expression' (length=37)
D:\wamp\www\crm\include\dompdf\src\Css\Stylesheet.php:882:string
html file:-
1)invoice.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Invoice</title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
<div style="width: 680px;">
<table style="border-collapse: collapse; width: 100%; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom: 20px;">
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 7px; color: #222222;" colspan="2">Order Details</td>
</tr>
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; text-align: left; padding: 7px;">
<b>Invoice Id</b> {{invoice_id}}<br />
<b>Date</b> {{date}}<br />
<b>Payment</b> {{payment_method}}<br />
</td>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; text-align: left; padding: 7px;">
<b>Address</b> {{store_address}}<br />
<b>Telephone</b> {{store_telephone}}<br />
<b>GSTIN</b> {{store_gstin}}<br />
</td>
</tr>
</table>
<table style="border-collapse: collapse; width: 100%; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom: 20px;">
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 7px; color: #222222;" colspan="3">Customer Details</td>
</tr>
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; text-align: left; padding: 7px;">
<b>GSTIN</b> {{customer_gstin}}<br />
<b>Telephone</b> {{customer_number}}<br />
<b>Address</b> {{customer_address}}<br />
</td>
</tr>
</table>
<table style="border-collapse: collapse; width: 100%; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom: 20px;">
<thead>
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 7px; color: #222222;">Product</td>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 7px; color: #222222;">Quantity</td>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 7px; color: #222222;">Price</td>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 7px; color: #222222;">Total</td>
</tr>
</thead>
<tbody>
{{products}}
</tbody>
<tfoot>
{{totals}}
</tfoot>
</table>
</div>
</body>
</html>
controller:-
2)sales.php(codeigniter controller)
$dompdf = new dompdf();
$sourcefile = file_get_contents(webpath.'include/invoice.html');
$original = array("{{invoice_id}}","{{date}}","{{payment_method}}","{{store_address}}","{{store_telephone}}","{{store_gstin}}","{{customer_gstin}}","{{customer_number}}","{{customer_address}}","{{products}}","{{totals}}");
$replace = array($invoice_id,$date,ucfirst($datas['payConition']),$storedata['store_address'],$storedata['store_telephone'],$storedata['store_gstIn'],$users['party_gstin'],$users['party_number'],$users['party_address'],$producttext,$totaltext);
$printfile = str_replace($original, $replace, $sourcefile);
$dompdf->loadHtml($printfile);
$dompdf->setPaper('A4', 'landscape');
$dompdf->render();
//$d
I've been searching everywhere, how to make a html/css resonsive S shaped dotted line like this
So, far it has been the bain of my existence.
I'm trying to avoid SVG at all costs, althought i've also searched how to do it in SVG.
Can someone help me?
hr.style-seven {
height: 150px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 130px 0px 0px 0px;
border-top: 1px dashed #8c8c8c;
margin-right:130px;
}
hr.style-seven:before {
display: block;
content: "";
height: 150px;
margin-top: -151px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 0px 0px 130px 0px;
margin-left:130px;
margin-right:-130px;
border-bottom: 1px dashed #8c8c8c;
}
.box{ height: 500px; margin-top:200px;}
<body class="box">
<hr class="style-seven"/>
</body>
Demo
I have created a div that loads hrefs using jquery .load function.
When you mouseenter over an href it loads another popup div using .load.
Everything appears normal when 1 div (with the dates) is loaded see pic(show1) enter image description here
But when I load a second div of dates the popup gets all distorded see pic(show2)enter image description here
Any ideas why this is happening?
Thanks.
This is the code that loads the divs with the hrefs:
<script>
$(document).ready(function(){
$("#left1");
});
</script>
<script>
$(document).ready(function(){
$("#center1");
});
</script>
<script>
$(document).ready(function(){
$("#center2");
});
</script>
<script>
$(document).ready(function(){
$("#center3").load("2016_select_paycheck_to_view.php");
});
</script>
<script>
$(document).ready(function(){
$("#center4").load("2015_select_paycheck_to_view.php");
});
</script>
#center3 {
border-top: 1px solid green;
border-bottom : 1px solid green;
border-left : 0px solid green;
border-right : 1px solid green;
background-color: #FDF5E6;
display: inline-table;
width: 190px;
height: 480px;
}
m3
{
font-family: calibri;
color: black;
font-size: 1em;
text-align: left;
border-top: 2px solid #4d4d4d;
border-left: 2px solid #4d4d4d;
border-right: 0px solid #4d4d4d;
position: relative;
top: 0px;
left: 0px;
padding: 0.2em;
margin-bottom: 0px;
margin-left: 0px;
width: 78px;
line-height: 0.8em;
}
m3t
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3px solid #8A0800;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-bottom: 0px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
m3b
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3.3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3.3px solid #8A0800;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-top: 0.8px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
#center4 {
border-top: 1px solid green;
border-bottom : 1px solid green;
border-left : 0px solid green;
border-right : 1px solid green;
background-color: #FDF5E6;
width: 190px;
height: 480px;
}
m4
{
font-family: calibri;
color: black;
font-size: 1em;
text-align: left;
border-top: 2px solid #4d4d4d;
border-left: 2px solid #4d4d4d;
border-right: 0px solid #4d4d4d;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.2em;
margin-bottom: 0px;
margin-left: 0px;
width: 78px;
line-height: 0.8em;
}
m4t
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3px solid #8A0800;
display: block;
float: left;
clear: both;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-bottom: 0px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
m4b
{
font-family: arial black;
color: white;
font-size: 1em;
text-align: center;
border-top: 3.3px solid #8A0800;
border-left: 1px solid #8A0800;
border-right: 1px solid #8A0800;
border-bottom: 3.3px solid #8A0800;
display: block;
float: left;
clear: both;
position: relative;
left: 2px;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.1em;
margin-top: 0.8px;
width: 79px;
line-height: 85%;
background-color: #8A0800;
}
<div id="firstwrapper">
<div id="left1"> 2019 </div>
<div id="center1"> 2018 </div>
<div id="center2"> 2017 </div>
<div id="center3"> 2016 </div>
<div id="center4"> 2015 </div>
</div>
This is the code that loads the popup divs:
$(function() {
$("a#trigger").mouseenter(function () {
$("div#pop-up").clearQueue();
$("div#pop-up").show();
});
$("a#trigger").mouseleave(function () {
$("div#pop-up").delay(60).slideUp();
});
$("div#pop-up").mouseenter(function () {
$(this).clearQueue();
});
$("div#pop-up").mouseleave(function () {
$(this).delay(200).slideUp();
});
$("a#trigger").mousemove(function(){
var x = $("#center3").offset();
if(x.top > 400, x.left > 9) {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
} else if(x.top > 600, x.left > 40) {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
} else {
var moveDown = 200;
var moveLeft = -200;
$("div#pop-up").css('top', x.top + moveDown).css('left', x.left + moveLeft);
}
});
<style type="text/css">
#secondwrapper {
border: 0px dashed red; /* black */
background: transparent;
position: relative;
left: 0px;
top: 0px;
z-index: 20;
width: 190px;
height: 480px;
}
#middle1 {
border: 1px dashed teal;
width: 190px;
height: 480px;
display: block;
clear: both;
float: left;
position: absolute;
left: 0px;
top: 0px;
margin-top: 0px;
margin-bottom: 20px;
background-color: #FDF5E6;
}
m1year
{
font-family: arial;
color: black;
font-weight: 700;
font-size: 0.9em;
text-align: left;
border: 1px dotted red;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.3em;
width: 50px;
height: 8px;
line-height: 0.7em;
background-color: transparent;
}
m1
{
font-family: calibri;
color: #8c0000;
font-size: 1em;
text-align: left;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
display: block;
float: left;
clear: both;
position: relative;
top: 0px;
left: 0px;
padding: 0.36em;
margin-bottom: 0em;
margin-left: 10px;
width: 155px;
height: 5px;
line-height: 4.3px;
background-color: white;
}
a:link {
text-decoration: none;
color: #8c0000;
}
a:visited {
color: #8c0000;
} /* visited link */
a:hover {
color: red;
} /* mouse over link */
div#pop-up {
display: none;
position: absolute;
left: 100px;
z-index: 30;
width: 550px;
height: 600px;
background: transparent;
color: #000000;
border: 0px dashed #ff6600; /* ORANGE */
}
</style>
<script>
$(document).ready(function(){
$("#pop-up").load("2016_dump_expenses_sums_PER_PAYCHECK_DYNAMIC.php? THURSDAY=<?PHP echo ($array0); ?>&WEDNESDAY=<?PHP echo ($array13); ?>&pay=<?PHP echo (958); ?>" ); });
</script>
<div id="secondwrapper">
<div id="middle1"
<m1year> 2016 </m1year>
<m1>
<A HREF="2016_dump_expenses_sums_PER_PAYCHECK_DYNAMIC.php?THURSDAY=<?PHP echo ($array0); ?>&WEDNESDAY=<?PHP echo ($array13); ?>&pay=<?PHP echo (958); ?> "
TARGET="mainFrame" id="trigger">
<?PHP
print ("$newMonth1");
print (" ");
print ("$newDay1");
print (" ");
print ("-");
print (" ");
print ("$newMonth1a");
print (" ");
print ("$newDay1a");
?>
</A></m1>
</div>
</div>
<div id="pop-up"> </div>
<div id="pop-up2"> </div>
<div id="pop-up3"> </div>
<div id="pop-up4"> </div>
Ok I think I fixed it. It was my css I removed some divs and it appears to be working ok now.
Please, show us the markup and css you're using: it looks like something inherent to css issue.
I wrote a PHP code to generate a table dynamically. The head of the table can be any text value in a database and the column of the table can be any text in the database.
If the value of the columns are the same or similar, then the width should be somewhat the same.
the following is my HTML code that is generated by PHP
<div style="margin: 0 auto; text-align: center;">
<table class="common2">
<thead>
<tr>
<th colspan="12">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left; width: 150px;">Answer Options</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">3</td>
<td style="text-align: center;">4</td>
<td style="text-align: center;">5</td>
<td style="text-align: center;">6</td>
<td style="text-align: center;">7</td>
<td style="text-align: center;">8</td>
<td style="text-align: center;">9</td>
<td style="text-align: center;">10</td>
<td style="text-align: center;">11+</td>
</tr>
<tr>
<td style="text-align: left; width: 150px;">Response Count</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">1</td>
</tr>
</tbody>
</table>
</div>
this is my common2 css code
.common2
{
width: 100%;
border: solid #E6E6E6 1px;
margin: 0 auto;
padding: 0;
border-spacing: 0px;
/* border-collapse: collapse; */
}
.common2 td
{
padding: 6px;
border: solid #E6E6E6 1px;
}
.common2 th
{
color: #fff;
font-weight: bold;
text-align: center;
border: solid #E6E6E6 1px;
background-color: #1A1A1C;
padding: 8px;
font-size: 14.5px;
}
.common2 th.highlighed
{
color: #fff;
font-weight: bold;
text-align: center;
border: 0px solid #DBDBDB;
background-color: #666666;
padding: 6px 10px;
}
.common2 tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
.common tr:last-child td:last-child {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.common2 tr:nth-child(even)
{
background-color: #E8E8E8; /*#E7E9E8; /*#D6D8D7;*/
position: relative;
}
.common2 td.stickOut
{
background-color: #DDEAFA; /*#DBAFAF;*/
position: relative;
font-weight: bold;
border: solid #DBDBDB 1px;
}
.common2 td.head
{
background-color: #25328C; /* #4F4F4F; */
text-align: center;
border: 1px solid #25328C;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
height: 35px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2C3C92), color-stop(1, #25328C));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #2C3C92 0%, #25328C 100%);
}
.common2 td.subfoot
{
background-color: #FFFF99; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
color: #000;
font-weight: 600;
font-style:italic;
padding: 4px 10px;
}
.common2 td.foot1
{
background-color: #999999; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
}
.common2 td.foot2
{
background-color: #555555; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
}
Here is a screenshot of my current output.
How can I make those columns with a similar width, excluding the very first column, as I specified how wide that will be?
remove width property from .common2
http://jsfiddle.net/raam86/knj9E/
My "Page [0]" text isn't centered on my webpage. Anyone know why? I could really use some help please.
Here is the html:
<html>
<head>
<title>Test Forum</title>
<link href="http://prime.programming-designs.com/test_forum/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="http://prime.programming-designs.com/test_forum//images/banner1.png" alt="" id="banner" />
<h1>Test Forums</h1>
<hr />
<div id="navi"><div id="naviheader">Boards</div>Testing<br />General Discussion<br />Video Games<br />Anime and Manga<br />BlazBlue<br />Shin Megami Tensei<br />Earthbound<br />Phantasy Star<br />Mobile Suit Gundam<br /></div>
<div class="postbox"><h4>CyanPrime</h4><hr />Welcome to the King's Gate BBS!</div>Page: [0]
</body>
</html>
Here is the CSS:
#charset "windows-1252";
body{
background-color: #EEFFF8;
color: #000000;
text-align: center;
}
.postbox{
text-align: left;
margin: auto;
background-color: #dbfef8;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
.stickypostbox{
text-align: left;
margin: auto;
background-color: #F5FFFA;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
h4{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #9932CC;
}
h1{
color: #551A8B;
}
hr{
color: #82FFCD;
background-color: #82FFCD;
height: 1px;
border: 0px dotted #82FFCD;
}
a{
color: #7F00FF;
text-decoration: none;
}
a:hover{
color: #7F00FF;
text-decoration: underline;
}
form{
margin: 0px auto;
width: 50%;
}
#formdiv {
background-color:#dbfef8;
border:1px solid #82FFCD;
}
.fielddiv1{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 45%;
float: left;
}
.fielddiv2{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 100%;
}
.fieldtext1{
width: 50%;
background-color: #82FFCD;
float: left;
}
.fieldtext2{
width: 100%;
background-color: #82FFCD;
}
#replydiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#admindiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#navi{
width: 200px;
background-color: #dbfef8;
border: 1px solid #82FFCD;
text-align: left;
float: left;
}
#naviheader{
width: 100%;
background-color: #82FFCD;
}
#submitbutton{
border: 1px solid #82FFCD;
background-color: #DBFEF8;
color: #000000;
margin-top: 5px;
width: 100px;
height: 20px;
}
#banner{
border: 1px solid #82FFCD;
}
.postbar{
margin-right: 0px;
margin-top: 0px;
}
.bannedtext{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #FF0000;
}
And here is the webpage so you can get some context (you'll notice that my "page [0]" is centered on the other boards, but not the index. http://prime.programming-designs.com/test_forum/
The float on the left is pushing the content to the right. It's still centred across the line, but it's not centred across the page. Adding a large bottom margin to .postbox illustrates this.
Centreing problem illustrated http://img169.imageshack.us/img169/9027/williamhtmlproblem.png
My suggestion would be to wrap the footer in a <div>. Either clear: both; (or just left), add margins on either end to compensate for the floated element, or give it position: absolute; left: 0; right: 0; to force centreing across the page.
Change:
Page: [0]
To (wrap it in a div with pager class):
<div class="pager">Page: [0]</div>
Change this in your CSS:
.postbox, .pager{
text-align: left;
margin: auto;
width: 50%;
margin-top: 10px;
}
.postbox {
background-color: #dbfef8;
border: 1px solid #82FFCD;
}
.pager {
text-align: center;
}
The reason this is happening is because your float is pushing over your content. You pager is coming straight off the body tag. In general, it's best to wrap plain text inside an html element.
You may want to revisit the structure of your page. Create a left column and a center column div or something like that.