I am using mPDF to download the HTML form. There is one button and on clicking on that it download the form.
PHP function to download PDF:
function download($id)
{
$data = $this->test_model->getMoreDataByID($id);
$name = str_replace(' ', "-", strtolower($data['name']));
$time = time();
$file_name = $name.$time.$id;
$html=$this->load->view('folder/form_download', $data, true);
$pdfFilePath = $file_name.".pdf";
$this->load->library('m_pdf');
$this->m_pdf->pdf->SetDisplayMode('fullpage');
$this->m_pdf->pdf->WriteHTML($html);
$this->m_pdf->pdf->Output($pdfFilePath, "D");
}
Here is the PDF data to be generate:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Annex C</title>
<style>
body {
font-family: "futura_md_btmedium";
}
.info_head{
font-size:20px;
font-weight:bold;
}
.invoice-box{
max-width:800px;
margin:auto;
border:2px solid #000;
font-size:16px;
color:#555;
}
.invoice-box table{
width:100%;
line-height:inherit;
}
.mtopm54 {
margin-top: -54px;
}
.mtopm47 {
margin-top: -47px;
}
.t-align {
text-align: center;
}
.invoice-box table td{
padding:5px;
vertical-align:top;
}
.invoice-box table tr.details td {
padding-bottom: 10px;
border: 0.5px dotted #ddd;
}
.invoice-box table tr.top table td.title{
font-size:11px;
color:#333;
text-align: center;
}
.invoice-box table tr.information table td{
padding-bottom:40px;
}
.invoice-box table tr.heading td{
background:#0776b8;
font-weight:bold;
text-align:center;
color:#fff;
}
.invoice-box table tr.details td{
text-align:center;
}
.total_details td{
border-top:1px solid #ddd;
font-weight:bold;
}
.invoice-box table tr.item.last td{
border-bottom:none;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td{
width:100%;
display:block;
text-align:center;
}
.invoice-box table tr.information table td{
width:100%;
display:block;
text-align:center;
}
}
.separator td{
padding-bottom:40px !important;
}
.bold-font {
font-weight: bold;
}
.bottom-border {
border-bottom: 1px solid #000;
}
.pbottopm-border {
padding-bottom: 4px;
border-bottom: 1px dotted #000;
}
.remark {
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<table class="t-align mtopm54 bottom-border">
<tr class="top">
<td colspan="4">
<tr>
<td class="title">
<b class="bold-font">This portion is to be completed where the solicitor is acting for the Corporation. <br>
SEARCHES ON THE RELEVANT PARTY <br>
</b> ("Relevant Party" as defined in the instruction on Legal Requisitions and Searches (Annex C))
</td>
</tr>
</td>
</tr>
</table>
<table class="mtopm54">
<tr>
<td style="width:16%">
<strong>Corporation Name:</strong>
</td>
<td style="width:70%">
<span class="pbottopm-border"><?= $corp_name; ?></span>
</td>
</tr>
</table>
<table class="mtopm54 bottom-border">
<tr>
<td style="width:16%">
<b>Accounting Corporate and Regulatory Authority ("ACRA") search (copy to be enclosed)</b>
</td>
</tr>
</table>
<table class="mtopm54">
<tr>
<td>
1) Does the ACRA search disclose any charge or debenture against the company?
</td>
</tr>
</table>
<table class="mtopm47">
<tr>
<td style="width:16%">
<input type="checkbox" <?php echo ($q_one=='No' ? 'checked' : '');?> name="q_one" class="" value="No" id="q_one"><span class="mleft5">No</span>
<input type="checkbox" <?php echo ($q_one=='Yes' ? 'checked' : '');?> name="q_one" class="" value="Yes" id="q_one"><span class="mleft5">Yes</span>
</td>
<td>
<span>If yes, please provide details (including relevant copies) of the charge or debenture or any other encumbrances against the company immediately.</span>
</td>
</tr>
</table>
</table>
</div>
</body>
</html>
It is generating PDF like this:
PDF-Generated
It is generating the HTML:
HTML
But some how it is not generating that data into PDF file.
Any reason?
I can't be sure, but it may be to do with mistakes in your HTML.
You currently have a table element inside another table element like this:
<table cellpadding="0" cellspacing="0">
<table class="t-align mtopm54 bottom-border">
This is not valid HTML. If you want to put a table inside another table, you need to place it inside a table cell. E.g.
This is WRONG
<table>
<table>
<tbody>
<tr>
<td>Content</td>
</tr>
</tbody>
</table>
</table>
This is RIGHT
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>Content</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Related
I'm currently working on a project in which I've to create an invoice using domPDF. I found a template on github for nice invoice.
Now whenever I create a PDF it breaks every table row in new page and create a 5-6 pages PDF.
I've tried tweaking css of this template but no luck.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="https://www.sparksuite.com/images/logo.png" style="width:100%; max-width:300px;">
</td>
<td>
Invoice #: 123<br>
Created: January 1, 2015<br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br>
12345 Sunny Road<br>
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
john#example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="item">
<td>
Hosting (3 months)
</td>
<td>
$75.00
</td>
</tr>
<tr class="item last">
<td>
Domain name (1 year)
</td>
<td>
$10.00
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: $385.00
</td>
</tr>
</table>
</div>
</body>
</html>
I want PDF output to be like this.
What's up guys!
I have a problem and I can not think of a solution.
I need to make a report using DOMPDF.
In this report, i need to print some employee information. In each page it is necessary to have header for the signature of the person in charge.
I have a group of employees. They are divided by departments.
I need a "break the page" loop when I change the employee's department or when I print 15 employees. After that, the loop should print the rest of the employees and execute the same rules if you change the employee's department again or have already been printed 15 employees.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relatório Geral</title>
<style>
body {
margin-top: -20px;
margin-left: -20px;
margin-right: -5px;
padding:0
}
.borda3 {
border:1px solid #999;
padding: 5px;
}
#borda2 td {
border: 1px solid #999;
border-collapse: collapse;
width: auto;
}
.centro {
text-align: center;
}
.tabela {
width: 100%;
}
span {
font-size: 100px;
}
td {
font-size: 11px;
}
html {
font-family: sans-serif;
}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
text-align: center;
font-size: 9px;
}
#customers td {
text-align: left;
font-size: 10px;
}
#customers a {
font-size: 10px;
}
.nome{
width: 180px;
}
.matricula{
width: 15px;
}
.numeros{
width: 15px;
}
.logo{
padding-left: 50px;
}
.logo a strong{
font-size: 15px;
text-align: center;
}
.logo a{
font-size: 12px;
}
.assinatura{
font-size: 9px;
margin-left: 60px;
}
</style>
</head>
{{--beginning of the loop--}}
<body>
<table class="tabela borda3">
<tr>
<td width="40%" class="centro">
<table class="logo">
<tr>
<td>
<img style="margin-left:20px; margin-top: -20px;width:220px; height: 65px;" src="img/logo_sarh.jpg">
</td>
</tr>
<tr>
<td>
<label for=""><a><strong> </strong></a></label><br>
</td>
</tr>
<tr>
<td><a>Referência:</a></td>
</tr>
<tr>
<td><a>Período:</a></td>
</tr>
</table>
</td>
<td width="40%" class="centro">
<table class="assinatura">
<tr>
<td style="height: 30px; text-align: left"><label for="">Em: _____/ _____/___________</label></td>
</tr>
<tr>
<td style="padding-bottom: -20px; height: 50px; text-align: center">
<label for="">____________________________________________</label><br>
<label style="font-size: 10px" for=""> SUPERVISOR</label>
</td>
</tr>
<tr>
<td style="height: 30px; text-align: left"><label for="">VISTO</label></td>
</tr>
<tr>
<td style="padding-bottom: -10px; height: 50px; text-align: center">
<label for="">____________________________________________</label><br>
<label style="font-size: 10px" for=""> SECRETÁRIO(A)</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table id="customers">
<tr>
<th class="nome">Nome</th>
<th class="matricula">Matrícula</th>
<th class="numeros">Dias</th>
<th class="numeros">Faltas</th>
<th class="numeros">Vac</th>
<th class="numeros">LSV</th>
<th class="numeros">L M</th>
<th class="numeros">Aci. Trab</th>
<th class="numeros">Adi. Not</th>
<th class="numeros">H.E Normal D</th>
<th class="numeros">H.E Normal N</th>
<th class="numeros">H.E Dom/Fer. D</th>
<th class="numeros">H.E Dom/Fer. N</th>
<th class="numeros">Ins.</th>
</tr>
{{--beginning of the loop--}}
<tr>
<td style="height: 20px;"><a>Augusto Damasceno Pedrozo</a></td>
<td style="height: 20px;"><a>12345678</a></td>
<td style="height: 20px;"><a>30</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>2</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20,02</a></td>
<td style="height: 20px;"><a>20</a></td>
</tr>
<tr>
<td style="height: 20px;" colspan="14">Observação:</td>
</tr>
{{--end of the loop--}}
</table>
</body>
{{--end of the loop--}}
</html>
Could anyone give me some direction to solve this?
I think you want something like this:
#foreach($customers as $customer)
#while ($loop->index <= 15)
<!-- build table row here -->
#endwhile
<!-- page break -->
#endforeach
in laravel there is a loop variable
this variable tracks the current index and some other things
you can check if the current index is smaller or equal to 15, perform page break, grab next, check if department is same as before, repeat
for the department changes you can set a variable which holds the current department and compare it in the loop like:
#if($current_dep !== $cust->department)
<!-- page break -->
#endif
don't forget to check for last record
#while(!$loop->last)
#endwhile
further information on the $loop variable: https://laravel.com/docs/5.7/blade#the-loop-variable
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I would like to the links will be bold in a div, but the links are in a variable which wrote down with echo.
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; width: 310px;" align="center">
<div class="description">
<b>Short description: </b></td>
</tr>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; height: 100px; width: 310px;" class="style2">
<br>
<?php print ($_SESSION['description']); ?><br>
<br>
<hr>
</div>
</td>
</tr>
The link is in the $_SESSION['description'].
The css:
.description a:link {
text-decoration: bold;
}
.description a:visited {
text-decoration: bold;
}
.description a:hover {
text-decoration: bold;
}
.description a:active {
text-decoration: bold;
}
I already tried some ways, but the style "can't see" the links which wrote with echo. How can I solve this?
<div class="description">
<b>Short description: </b></td> </tr> <tr> ....
is no valid html!
FIX IT TO
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; width: 310px;" align="center">
<b>Short description: </b></td>
</tr>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; height: 100px; width: 310px;" class="style2">
<div class="description">
<br>
<?php print ($_SESSION['description']); ?><br>
<br>
<hr>
</div>
</td>
</tr>
Replace all
text-decoration: bold;
with
font-weight:bold
UPDATE
A downvote, seriously? He is putting the link in description class, which only needs to be fixed
Now style can see (after replace as I said)
<html>
<head>
<style>
.description a:link {
font-weight: bold
}
.description a:visited {
font-weight: bold
}
.description a:hover {
font-weight: bold
}
.description a:active {
font-weight: bold
}
</style>
</head>
<body>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; width: 310px;" align="center">
<div class="description">
<b>Short description: </b>
</td>
</tr>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; height: 100px; width: 310px;" class="style2">
<br>
google
<br>
<hr>
</div>
</td>
</tr>
</body>
</head>
and what he was doing
<html>
<head>
<style>
.description a:link {
text-decoration: bold;
}
.description a:visited {
text-decoration: bold;
}
.description a:hover {
text-decoration: bold;
}
.description a:active {
text-decoration: bold;
}
</style>
</head>
<body>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; width: 310px;" align="center">
<div class="description">
<b>Short description: </b></td>
</tr>
<tr>
<td rowspan="1" colspan="4" style="vertical-align: top; height: 100px; width: 310px;" class="style2">
<br>
google
<br>
<hr>
</div>
</td>
</tr>
</body></head>
PLEASE CHECK BEFORE DOWNVOTING
<a><?php echo $_SESSION['description']; ?></a>
Now it become a link, and you can put style like
a:link{}
I am trying to apply my custom css in email template.
I already done these things.
Add inline css to my html
<table align="center" style="width:600px; background:#FFF; border:1px solid #CCC; padding:0; margin-top:0; border-collapse:collapse;">
include inline css file and add path of these css in admin->system->configuration->design {{inlinecss file="email-inline.css"}}
{{inlinecss file="email-non-inline.css"}}
I checked that they are including or not ny editing body background color to black
but no success yet.
I am editing newsletter subscription email template.
I got success in adding style tag by adding {{var non_inline_styles}} to my html file .but not able to write my css into style tag. how can I write my own css in this tag.
So can anyone tell me how can I style my email template
I tried this too
http://devdocs.magento.com/guides/m1x/ce19-ee114/RWD_responsive_emails.html#email-css
here is my template file code
<!--#subject Newsletter subscription success #-->
{{template config_path="design/email/header"}}
{{var non_inline_styles}}
{{inlinecss file="email-inline.css"}}
{{inlinecss file="email-non-inline.css"}}
<div class="newsletter-confirmation">
<table align="center" style="width:600px; background:#FFF; border:1px solid #CCC; padding:0; margin-top:0; border-collapse:collapse;">
<!--Header -->
<tr>
<td style="padding:18px; margin:0; height:40px\9;">
<p style="float:right; margin:0; padding:0; width:200px;">
<img src="{{skin url='images/hot_line.jpg'}}" style="text-align:right; vertical-align:bottom; float:right; clear:both; margin-top:21px;">
</p>
</td>
</tr>
<tr><td style="height:1px; border-bottom:1px solid #000; width:100%; margin:0; padding:0; line-height:0;"> </td></tr>
<!-- / Header -->
<!--Mid -->
<tr>
<td>
<table align="center" style="width:564px; background:#FFF; padding:18px; margin-top:0; border-collapse:collapse; margin-top:10px;">
<tr>
<td>
<p style="color:#000; font:12px/20px Arial, Helvetica, sans-serif; padding:0; margin:0;">Greetings from ...!<br>
You have been successfully subscribed to the newsletter.</p>
</td>
</tr>
<tr><td height="18"></td></tr>
<tr>
<td>
<table align="center" style="width:564px; margin:0; padding:0; border-collapse:collapse;">
<tr>
<td><a href="#" target="_blank" style="margin:0; padding:0 10px 0 0; border:none; outline:none;">
<img src="{{skin url='images/free-shipping.jpg'}}" style="text-align:left; vertical-align:bottom; border:none; outline:none; margin:0; padding:0;"></a>
</td>
<td rowspan="2"><a href="#" target="_blank" style="margin:0; padding:0; border:none; outline:none;">
<img src="{{skin url='images/return-exchange.jpg'}}" style="text-align:left; vertical-align:bottom; border:none; outline:none; margin:0; padding:0 0 0 10px;"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="color:#000; font:12px/20px Arial, Helvetica, sans-serif; padding:0; margin:12px 0;">Thank you<br><strong>Team ...</strong></p>
</td>
</tr>
</table>
</td>
</tr>
<!--Mid -->
<!--Footer -->
<tr>
<td style="width:582px; padding-left:18px; background:#efefef;" >
<p style="color:#666666; font:11px/15px Arial, Helvetica, sans-serif; padding:0; margin:8px 0;">
....com All Rights Reserved.
</p>
</td>
</tr>
<!-- / Footer -->
</table>
</div>
{{template config_path="design/email/footer"}}
The styles should be written like below in your case
<!--#styles
.button {
color: white!important;
width: 19%;
padding: 8px;
border-radius: 5px;
}
.approve {
background: rgba(18, 171, 18, 0.72);
margin-right:5px;
}
.disapprove {
background: rgba(232, 73, 73, 0.91);
}
.actions {
display: inline-block;
margin-top: 32px;
}
#-->
I'm a self taught coder and usually I can figure out problems for myself but this ones a stubborn one. I'm redesigning a website for my friend and I've successfully coded the mobile version of his site, but the desktop version is proving to be difficult.
The site is a database for a home bar, tracking; Drinkers, Shots, Units and Tabs. The index page is a leaderboard with Drinkers & Last Drink bought. My problem is positioning the Drinkers Ranks on the leaderboard to work across multiple web browsers.
It's meant to look like this: (screenshot)
http://giblets-grave.co.uk/previews/1400x900_GG-desktop_design_final.jpg
The alternating background is something I'm willing to scrap if it makes echoing results easier.
I've tried using tables, divs, ul/li's.. sample of what I used:
<table cellpadding="0" cellspacing="0">
<col width="85px" />
<col width="65px" />
<col width="65px" />
<tr>
<th colspan="3" align="left">Chris Clarkson</th>
</tr>
<tr>
<td>
<div class="crop round-five body-shadow" >
<img src="uploads/1.jpg" class="" />
</div>
</td>
<td>
<ul><h2>382.73</h2><li>units</li></ul><br />
</td>
<td>
<ul><h2>613</h2><li>shots</li></ul><br />
</td>
</tr>
</table>
but its just coming out as a big mess, can anyone help?
Definitely should be using table to do this in my opinion.
As for displaying the alternating colors, you would want to apply a background color to the tr's using nth-child() pseudo-class.
JSFIDDLE: http://jsfiddle.net/XYh7f/
HTML:
<div class="container">
<div class="leaderboard">
<table id="main">
<tr>
<td>Leaderboard</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="drinks">
<table id="main-data">
<tr>
<td class="data-title"><h2>Last Drinks Served</h2></td>
</tr>
<tr>
<table class="data">
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
</table>
</tr>
</table>
</div>
</div><!-- END CONTAINER -->
CSS:
/* CONTAINER STYLES */
.container {
width: 960px;
}
.leaderboard {
float: left;
}
.drinks {
float: left;
}
/* LEADER BOARD STYLES */
table {
color: #eee;
width: 200px;
background: none;
}
tr { background: none; }
td { background: none; }
#main {
text-align: center;
}
#main tr:nth-child(odd) {
background: #444;
}
#main tr:nth-child(even) {
background: #555;
}
#main tr td .client tr {
background: none;
}
/* LAST DRINKS SERVED STYLES */
#main-data {
width: 740px;
}
#main-data tr:nth-child(odd) {
background: #444;
}
.data {
width: 740px;
}
.data tr:nth-child(odd) {
background: #222;
}
.data td {
border-right: 1px solid #000;
}
.data tr:nth-child(even) {
background: #333;
}
.data-title {
padding: 0 0 0 60px;
}
.data-time {
text-align: right;
width: 120px;
}
.data-shots {
text-align: right;
width: 60px;
}
.data-drink {
text-align: center;
width: 240px;
}
.data-drinker {
text-align: left;
width: 200px;
}
.data-date {
width: 140px;
}