I am adding a feature in my project wherein users can convert their data into pdf, but i am having a problem with css. How can i adjust this div so that it will align in the border of my table? padding and margin does not work since the table cell also adjusts. or a im adding the wrong px? I displayed the table border so that you can see how far the border of the div is. Here's the code
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2">
<b>Email </b>
<div style="display: inline-block;border-bottom:.7px solid black;height:15px;padding:0px;width:200px;overflow:hidden;">
{!! $usermodel->email !!}
</div>
</td>
</tr>
</table>
If you want to align the div with the border of the table, you can add a vertical-align property to the td element with a value of top. This will align the top of the div with the top of the table cell.
You can also try setting the height of the td element to the height of the div plus any additional padding you want to add. This will ensure that the entire div is contained within the table cell.
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2" style="vertical-align: top; height: 30px;">
<b>Email </b>
<div style="display: inline-block; border-bottom: .7px solid black; height: 15px; padding: 7.5px 0; width: 200px; overflow: hidden;">
{!! $usermodel->email !!}
</div>
</td>
</tr>
</table>
Since you are using running styles, on this occasion, I suggest (perhaps could be bettered):-
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2"; style="font-size:18px; padding: 2px" >
<b><sup>Email </sup></b>
<div style="font-size:15px;padding: 2px 0px 2px; border-bottom: 1px solid black; display:inline-block; width: 220px; overflow: hidden;">
{!! $blackmamba#gmail.com !!}
</div>
</td>
</tr>
</table>
Try doing it in an external CSS stylesheet.
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.
I have a table with two columns, left column holds an image and right one some text, I want to make this table responsive so when on mobile both columns hold all the horizontal space and the right column goes below the first column, making it somewhat fluid.
This is my template:
#if(count($mailData['order']['discountcodes']) > 0)
#foreach($mailData['order']['discountcodes'] as $code)
---
<br>
# {{ $code->discount->title }} (-{{ $code->discount->discountPercent }}%)
<table style="width:100%; table-layout:fixed;" >
<tr>
<td class="left_column"><img src="{{ $code->discount->image }}" style="min-width:150px; max-width:150px; min-height:100px; max-height:100px; border:1px solid rgb(150,150,150);"></td>
<td class="right_column"><p>Precio:{{ $code->discount->finalPrice }}</p><strong><p>CÓDIGO: {{ $code->unicode }}</p></strong></td>
</tr>
</table>
<br>
---
#endforeach
#endif
# Total:{{ $mailData['order']['cartTotalPrice'] }}
<br>
<br>
Disruta Tu Compañia,
<br>
{{ env('APP_NAME') }}
#endcomponent
<style>
.left_column{text-align:left; display:inline-block; width:150px;}
.right_column{text-align:left; display:inline-block; vertical-align:top; padding:0px 0px 0px 20px;}
#media only screen and (max-width: 480px)
{
.left_column{width:100% !important; display:block !important;}
.right_column{width:100% !important; display:block !important;}
}
</style>
Normally you can't really do that.
But now with Flexbox you can !
Except that I see your tag "email" and if this is going into an HTML email it will not work.
In fact, to have that working, you should use Flexbox on your <tr> tag
<style>
tr {
display: flex;
width: 100%;
flex-direction: column;
}
td {
width: 100%; // Force 100% width of the table
}
</style>
NB: This can gives unexpected result in complex tables
NB: As I said, this won't work in HTML emails because of email softwares/apps restrictions (no video, no JS, no CSS3, etc)
#media(max-width: 600px) {
tr {
display: flex;
width: 100%;
flex-direction: column;
}
td {
width: 100%;
}
}
<table class="table" width="100%">
<tbody>
<tr>
<th width="169">Some title here</th>
<td width="108">0,55 %</td>
<td width="117">0,41 %</td>
<td width="96">0,46 %</td>
<td width="65">0,40 %</td>
<td width="79">0,51%</td>
</tr>
</tbody>
</table>
I've got HTML code like below:
<p style="text-align: center; width: 200px">Hellow world</p>
<table style="width: 500px; font-family: Arial; font-size: 18px">
<td style="width: 20px; color: red">One</td>
<td style="width: 50px; color: green">Two</td>
<td style="width: 100px; color: blue">Three</td>
</table>
I need preg_replace pattern for PHP that will remove only width property from all tags (td, tr, thead, tbody) inside table.
<p style="text-align: center; width: 200px">Hellow world</p>
<table style="font-family: Arial; font-size: 18px">
<td style="color: red">One</td>
<td style="color: green">Two</td>
<td style="color: blue">Three</td>
</table>
So far I come up with this:
// deleting style attribute from table
$sHtml = preg_replace('%<table[^>]*?style\s*=\s*"[^"]*"[^>]*>(.*?)</table>%si', '<table>$1</table>', $sHtml);
// deleting style attribute from td
$sHtml = preg_replace('%<td[^>]*?style\s*=\s*"[^"]*"[^>]*>(.*?)</td>%si', '<td>$1</td>', $sHtml);
Which deletes all whole style property inside table and tds:
<p style="text-align: center; width: 200px">Hellow world</p>
<table>
<td>One</td>
<td>Two</td>
<td>Three</td>
</table>
Try this
// deleting style attribute from table
$sHtml = preg_replace('/(<table|tr|td|tbody|thead)(.*)(width: [0-9]+px;)/i', '$1$2', $sHtml);
I have an HTML document, which consists of 100s of rows with 3 columns each. Basic structure is like the following:
<table style="padding: 10px; width: 100%; border-collapse: collapse; border-style: 1px dotted; font-size: 10px">
<tr>
<td style="vertical-align: middle;text-align: center;border: 1px dashed black"></td>
<td style="vertical-align: middle;text-align: center;border: 1px dashed black"></td>
<td style="vertical-align: middle;text-align: center;border: 1px dashed black"></td>
</tr>
...
</table>
I want this table's borders to be in dashed format. However, it doesn't work. It keeps giving me weird results where the border is black with blurry gray spread around it (almost looks like a shadow).
I am using TCPDF 6.2.12.
How should I set this up?
I have made few pages where all the files where tested on screen resolution 1366x768. But when i tested it on 1024x768 the menu & images overlap. Is there some solution to this ?
Please Help!
This is my homepage.php
<?php session_start();?>
<html>
<head><title>Welcome</title></head>
<style>
#heading{ text-align:right;font-size: 18px;float:right;margin:35px 20px;}
a:hover{ color:#BEBEBC; }
a{ color:black;}
#img{margin:10px 10px;}
.box {margin-left: auto;margin-right: auto;}
.wrapper {display: table-cell;vertical-align: middle;width: 2500px;height:450px;}
#rectangle {width: 300;height: 200;border-style: solid black;border-radius:5px;border-width:10px;border-color:black;}
img{opacity: 0.5;filter: alpha(opacity=40); /* For IE8 and earlier */}
img:hover {opacity: 1.0;filter: alpha(opacity=100); /* For IE8 and earlier */}
#copyright{text-align:center;color:black;}
ul{
padding: 0;
list-style: none;
}
ul li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
}
li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
//background: #1E90FF;
color:black;
}
ul li a{
display: block;
//padding: 5px 10px;
color: black;
//background: #B0D8FF;
text-decoration: none;
}
ul li a:hover{
color: white;
//background: #939393;
}
ul li ul{
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
</style>
<body background="a6.jpg">
<img id="img" src="LOGO.jpg" width="150px" height="100px">
<h1 align="center" style="position:absolute;top:30px; left:400px;">MEETING ROOM APPLICATION</h1>
<div id="heading"><ul>
<li>Home</li>
<li><?php echo ucwords($_SESSION['usr_name']); ?> ▾
<ul>
<li>Change Password</li>
<li>Logout</li>
</ul>
</li>
<li>Help</li>
</ul></div>
<br><br>
<hr width="100%">
<table border="1" width="100%" style="border:black;">
<tr><th align="center" colspan="8" style="border-radius: 5px;border-style: solid;">No. of Booking for Present Day</th></tr>
<tr><td align="center" style="border-radius: 5px;border-style: solid;">3-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">5-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center" align="center">8-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">16-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td> </tr>
</table>
<div class="wrapper">
<table class="box">
<tr>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" style="border: 10px solid white;border-radius:10px;"><h2 align="center">3-Seater</h2><p align="center">This is a 3-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="5-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">5-Seater</h2><p align="center">This is a 5-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="8-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">8-Seater</h2><p align="center"><This is a 8-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="16-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">16-Seater</h2><p align="center">This is a 16-Seater room.</font></p></td>
</tr>
</table>
</div>
</body>
</html>
With the code provided above you will find that the rendering of the site will differ dependent on the screen size. For example when using an iPad or iPhone you will have issues having to scroll round the page.
The only way to counter this is to use responsive design which effectively uses percetages to calculate the desired width.
For example we have two elements on a page side by side, rather than say each element is 500px wide (as this would require scrolling on a screen smaller than 1000px, we can say that each element has a width of 50%, this way regardless of the screen size, the elements sizes according to the device.
Responsive design is really the way forward and you will not be able to solve your issue without following this path. Responsive design is becoming the standard more and more and you may as well learn sooner rather than later or risk being left in the dust.
I would suggest reading the following and should you still struggle, create a new question targeted towards responsive design.
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
You may also find that integrating a pre-existing responsive template may be the quickest solution, see the following:
http://www.responsivegridsystem.com/
http://getbootstrap.com/css/
Hope this helps.