I have an HTML form and I have all the inputs except for the submit button in a table. I centered everything in the table besides except for the submit button, even though I tried numerous things to center it to no avail. Please help me center my submit button under my table with the other inputs!
Here is my HTML page:
<html>
<head>
<link rel="stylesheet" href="Site.css">
<?php include("Header.php"); ?>
</div>
</head>
<body>
<div id="main">
<h1>About</h1>
<form action="Insert.php" method="post">
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"></td>
</tr>
</table>
<input type="submit">
</form>
<?php include("Footer.php");?>
</div>
</body>
</html>
And here is my CSS:
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
background-color: #4C875E;
color: #C9C9C9;
}
#main {
padding: 20px;
background-color: #1C404A;
border-radius: 0 4px 4px 4px;
}
h1 {
border-bottom: 3px solid #4C875E;
color: #4C875E;
}
#swag {
left: 0;
line-height: 200px;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
border-bottom: 0;
text-align: center;
color: #BABABA;
}
ul#menu {
padding: 0;
position: relative;
margin: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #1C404A;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #C9C9C9;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: #e8eef4;
}
#bg {
background: url(assets/banner.jpg) no-repeat center center fixed;
background-size: 100% auto;
}
table {
margin: 0 auto;
}
Try putting it inside your table:
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"></td>
</tr>
<tr>
<td colspan='2'><center><input type="submit"></center></td>
</tr>
</table>
FIDDLE
Try this:
<tr>
<td><input type="submit"></td>
</tr>
</table>
Working Example
Try this:
<center><input type="submit"></center>
LIVE DEMO
You should put the input button inside the table in a new rowUse td colspan to merge 2 columns To center the button, use attribute align="center".
Code
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"/></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"/></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"/></td>
</tr>
</table>
As far as I know there is no exact way to center things in CSS with a single command. However there are some ways that you can do it manually. I would do one of two things. First (forgive me if this seems too simple) I might just add something like & nbsp;& nbsp;& nbsp;& nbsp;& nbsp; in front of the submit button. So that would just add some space in front of it (and it scales pretty nicely if the user zooms in).
The other thing I would do (and probably the better solution) would be to change the width of the parent div (so that it is just wide enough to fit the form) and then get the width of that like so:
parseInt(getComputedStyle(document.getElementById('main')).width)
divide it by two to get the center, then place the button at the center minus half the width of the button:
parseInt(getComputedStyle(getElementById("mySubmitButtonId")).width)
Note: place it using margin-left
Related
I have read many questions and many articles but cant find my answer Here is my code result
Here is my code
.checkout-cart-total {
background-color: #f5f5f5;
padding: 45px;
}
#media only screen and (max-width: 575px) {
.checkout-cart-total {
padding: 30px;
}
}
.checkout-cart-total h4 {
flex-basis: 18px;
line-height: 23px;
font-weight: 600;
color: #292929;
}
.checkout-cart-total h4:first-child {
margin-top: 0;
margin-bottom: 25px;
}
.checkout-cart-total h4:last-child {
margin-top: 15px;
margin-bottom: 0;
}
.checkout-cart-total h4 span {
float: right;
display: block;
}
.checkout-cart-total ul {
border-bottom: 1px solid #292929;
}
.checkout-cart-total ul li {
color: #292929;
font-size: 14px;
line-height: 23px;
font-weight: 600;
display: block;
margin-bottom: 16px;
}
.checkout-cart-total ul li span {
color: #292929;
float: right;
}
.checkout-cart-total p {
line-height: 30px;
font-weight: 600;
color: #292929;
padding: 10px 0;
border-bottom: 1px solid #292929;
margin: 0;
}
.checkout-cart-total p span {
float: right;
}
<div class="col-12 mb-60">
<h4 class="checkout-title">Cart Total</h4>
<div class="checkout-cart-total">
<h4>Product <span>Total</span></h4>
<ul>
<?php
$cartres = $fetchcart->fetchAll(PDO::FETCH_ASSOC);
foreach($cartres as $row){
?>
<li>
<input type="text" disabled value="<?php echo $row['p_name']; ?>" name="product_name[]" style="color:#292929;font-size:14px;font-weight:600;display:inline;float:left;border:none;background:transparent;"> X
<input type="text" disabled value="<?php echo $row['qty']; ?>" name="qty[]" style="color:#292929;font-size:14px;font-weight:600;display:inline;float:left;border:none;background:transparent;">
<span><input type="text" disabled value="<?php echo $row['price']; ?>" name="product_name[]" style="color:#292929;font-size:14px;font-weight:600;float:left;display:inline;border:none;background:transparent;"><input type="text" disabled value="<?php echo $row['p_id']; ?>" hidden name="product_id[]" style="color:#292929;font-size:14px;font-weight:600;float:left;display:inline;border:none;background:transparent;"></span>
</li>
<?php } ?>
</ul>
</div>
</div>
Help me to figure out how to align this I have done many techniques like the form-inline bootstrap class but doesn't work for me. Because I am submitting two data at a time so I cant use form-inline class first form is for user details and second for product details and checkout at a time.
The best design can be achieved using tables. This is what tables are used for - representation of data. You can also use <input type="number"> for quantity and update total price accordingly.
DOCS: https://getbootstrap.com/docs/4.5/content/tables/
/*DEMO*/body{padding:2rem}input[type="number"]{max-width:75px}
tbody th,tbody td{vertical-align:middle!important}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="row">
<div class="col-12">
<h4>Cart Total</h4>
<table class="table table-striped table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem Ipsum</td>
<td>1400</td>
<td><input class="form-control form-control-sm" type="number" value="1"></td>
<td>1400</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Dolor Sit Amet</td>
<td>425</td>
<td><input class="form-control form-control-sm" type="number" value="2"></td>
<td>850</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lorem Lorem</td>
<td>850</td>
<td><input class="form-control form-control-sm" type="number" value="1"></td>
<td>850</td>
</tr>
</tbody>
</table>
</div>
</div>
I think its better to use Table layout or Display Flex or Grid layout.
All the theories below are from w3school,
Table Layout:
The table-layout property defines the algorithm used to lay out table cells, rows, and columns.
The main benefit of table-layout: fixed; is that the table renders much faster. On large tables, users will not see any part of the table until the browser has rendered the whole table. So, if you use table-layout: fixed, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker!
Display Flex:
Click here
HTML:
<div> // display:flex, flex-direction:column, justify-content:space-around
<div> // display:flex, flex-direction:row, justify-content:space-around
<div> </div>
<div> </div>
</div>
<div> // display:flex, flex-direction:row, justify-content:space-around
<div> </div>
<div> </div>
</div>
</div>
Grid Layout:
Link here
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
My choice:
There are always different approaches to do a thing, but in the situation, you mention I would prefer to go with display: flex method.
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
This question already has answers here:
Warning: preg_replace(): Unknown modifier
(3 answers)
Closed 5 years ago.
So i want to extract everything in between form tags (including the tags them selves).
The form is as below:
<body><br />
<!--
<form method="POST" action="#">
<table style="table-layout: fixed; border: 1px solid #ffffff; " border="1">
<!--
<col width="50"> --></p>
<tr style="width: 1154px; background-color: #0d56c2; vertical-align: middle; color: #ffffff; height: 70px; ">
<td style="width: 413px; text-align: center;">Calls</td>
<td style="background-color: #D6DCE5; width: 319px; padding-left: 20px; padding-top: 15px;"><input type="text" name="calls" value="150" style="width: 173px;"></td>
<td style="width: 412px; padding: 5px; vertical-align: middle;"> in a period of <input name="period" value="5" style="width: 173px; "> <br />
<select name="callUnit" style="width: 100px; height: 29px; position: absolute;"><option value="hour" selected>hours</option><option value="minute" >minutes</option></select>
</td>
</tr>
</table>
</form>
</body>
Regex i am using is: <form.*>[\s\S]*<\/form> and according to regex101 This is a valid regular expression that should extract form tags + everthing in between.
However using the above regular expression in preg_match i get the following error: Warning: preg_match(): Unknown modifier '['
Not sure what you actual issue is. For me your pattern works like charm:
<?php
$markup = <<<HTML
<body><br />
<!--
<form method="POST" action="#">
<table style="table-layout: fixed; border: 1px solid #ffffff; " border="1">
<!--
<col width="50"> --></p>
<tr style="width: 1154px; background-color: #0d56c2; vertical-align: middle; color: #ffffff; height: 70px; ">
<td style="width: 413px; text-align: center;">Calls</td>
<td style="background-color: #D6DCE5; width: 319px; padding-left: 20px; padding-top: 15px;"><input type="text" name="calls" value="150" style="width: 173px;"></td>
<td style="width: 412px; padding: 5px; vertical-align: middle;"> in a period of <input name="period" value="5" style="width: 173px; "> <br />
<select name="callUnit" style="width: 100px; height: 29px; position: absolute;"><option value="hour" selected>hours</option><option value="minute" >minutes</option></select>
</td>
</tr>
</table>
</form>
</body>
HTML;
preg_match('~<form.*>([\s\S]*)</form>~', $markup, $tokens);
var_dump($tokens[1]);
The output of that is:
string(829) "
<table style="table-layout: fixed; border: 1px solid #ffffff; " border="1">
<!--
<col width="50"> --></p>
<tr style="width: 1154px; background-color: #0d56c2; vertical-align: middle; color: #ffffff; height: 70px; ">
<td style="width: 413px; text-align: center;">Calls</td>
<td style="background-color: #D6DCE5; width: 319px; padding-left: 20px; padding-top: 15px;"><input type="text" name="calls" value="150" style="width: 173px;"></td>
<td style="width: 412px; padding: 5px; vertical-align: middle;"> in a period of <input name="period" value="5" style="width: 173px; "> <br />
<select name="callUnit" style="width: 100px; height: 29px; position: absolute;"><option value="hour" selected>hours</option><option value="minute" >minutes</option></select>
</td>
</tr>
</table>
"
The only modification I made is to add the capture group ((...)) to be able to actually extract something.
You are escaping the forward slash in the closing </form> tag with a back slash. Most likely that is because online regex tools like regex101 use forward slashes as standard delimiters in their patterns. Note that you can use other characters which makes the pattern easier to read, since you do not have to escape characters then...
I suspect that you maybe forgot to place your pattern in between delimiters?
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!
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;
}