I just need the simplest workaround way or at least reason why it does not work
I already figured out that bootstrap does not work with MPDF, so wrote a simplest piece of regular html code. But still, no table is being shown.
<?php
require_once __DIR__ . '/vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf();
//html variable
$data= '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
//A Simple table
<table >
<thead>
<tr>
<th scope="col">ID</th>
</tr>
</thead>
<tbody align="center">
<tr ><td> 2413134</td><tr/>
</tbody>
</table>
</body>
</html>';
//outputing from here
$mpdf->WriteHTML($data);
$mpdf->Output();
?>
Try to add a border via css:
td {
border: 1px solid;
}
Related
I asked this question before but worded it totally wrong so I'll try again.
I have a CSS issue with a landing page I'm building on Vue.js.
Image
I'm trying to align the table headers with the the table content. Anyone know the best way to do this - I'm been trying for 2 hours without getting anywhere.
Edit: I don't have admin privileges to add people to the project but would be more than happy to send the files via email, if you want to take a look...
Did you have used text-align ?
simple solution if do You want text-left, text-right or text-center in table column then add inline css otherwise external css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 100%;
border: 1px solid #000000;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="text-left">Text Left Head</th>
<th class="text-center">Text center Head</th>
<th class="text-right">Text Right Head</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Text Left Body</td>
<td class="text-center">Text center Body</td>
<td class="text-right">Text Right Body</td>
</tr>
</tbody>
</table>
</body>
</html>
I like to unseen the th in the first tr only but the th in the second tr disappeared. Do you know how to fix the code so the first th that contains "Min." text can be showed when the media width is smaller than 640px? Thank you in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<style type="text/css">
#media only screen and (max-width: 800px) {
#unseen table th div {display: none;},
}
#media only screen and (max-width: 640px) {
#unseen table th:nth-child(1),
#unseen table th:nth-child(6),
#unseen table th:nth-child(7),
#unseen table th:nth-child(8){display:none;},
</style>
<body>
<section id="unseen">
<table class="table-bordered table-striped table-condensed productForm" width="100%" cellspacing="0px">
<thead>
<tr style="border:solid 1px #FFFFFF;">
<th rowspan="2">Photo</th>
<th rowspan="2">Part Number<div>/ Description</div> </th>
<th rowspan="2">Color <div>/ nm</div></th>
<th colspan="3">Luminous Intensity</th>
<th rowspan="2">Viewing<br />Angle</th>
<th rowspan="2">Data<br />Sheet</th>
<th rowspan="2" colspan="2">3D Spec<sup>†</sup></th>
<th rowspan="2">Request<br />for Quote</th>
</tr>
<tr>
<th>Min.</th>
<th>Typ.</th>
<th>Unit</th>
</tr>
</thead>
</table>
</section>
</body>
</html>
You can use :first-child selector for it. See this fiddle http://jsfiddle.net/s281dopc/
#unseen table tr:first-child th:nth-child(1),
#unseen table tr:first-child th:nth-child(6),
#unseen table tr:first-child th:nth-child(7),
#unseen table tr:first-child th:nth-child(8) {
display:none;
}
You are trying to select the child of tr first,
So use nth child, first-child to select the tr first.
then get hold of th
I'm trying to edit the table borders using CSS and Dream Weaver but the borders aren't showing in IE 10 or FF22. What am I doing wrong?
Here's my code:
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
table {
padding:15px;
border-color:red;
}
.cell {
border-bottom-color:#585858;
border-bottom-width:medium;
border-right-color:#787878;
border-right-width:thick;
border-top-color:#000;
border-top-width:thin;
border-left-color:#000;
border-left-width:thin;
background-color:#BFFFFF;
alignment-adjust:central;
}
</style>
</head>
<body>
<table>
<tr>
<td class="cell"><center>This is my test table</center></td>
<td><center>blah blah blah</center></td>
<td class="cell"><center>ya ya ya ya ya</center></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>Moravský kras</title>
</head>
<body>
<table style="border-spacing: 0px">
<tr>
<td style="padding: 0px"><img src="http://placehold.it/150x150"></td>
</tr>
</table>
</body>
</html>
With this simple code, I get some bottom-padding in the table cell under the image (at least in firefox/chrome). Please, tell me how can I get rid of it. Here is a fiddle.
This is because of the img being inline by nature. Make it block.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>Moravský kras</title>
</head>
<body>
<table style="border-spacing: 0px">
<tr>
<td style="padding: 0px"><img src="http://placehold.it/150x150" style="display: block;"></td>
</tr>
</table>
</body>
</html>
Fiddle: http://jsfiddle.net/praveenscience/ZWwTu/1/
Explanation
The image element is one such element, which has both the nature of appearing inline as well as having a box model. So, it is kind of something to do with vertical-alignment. When you give block display, it treats as a regular box model. This is just my view.
This is my code. http://furkan.brove.net/syflm.php
It is not working in Chrome when i print it. I wish it puts header and footer on every page in print mode. Also in every browser last footer is going bottom of the content. But i want it to be bottom of the page.
Is there any way to solve my problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
<style>
#all thead { display: table-header-group; }
#all tfoot { display: table-footer-group; }
.header_table{ height:100px; }
.footer_table{ height:100px; }
</style>
</head>
<body>
<table id="all">
<thead><tr><td><table class="header_table"><tr><td>Your header goes here</td></tr></table></td></tr></thead>
<tfoot><tr><td><table class="footer_table"><tr><td>Your footer goes here</td></tr></table></td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be<br />
<!-- i wrote this many -->
</td></tr>
</tbody>
</table>
</body>
</html>
This is IE screenshot. In second page it puts header and footer well.
This is Firefox screenshot. It is working too.
But in chrome it is not working
This is a known issue with Webkit, unfortunately.
Here it is on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).