I would like to create some text like this.
I used this code, but it didn't work:
woman <span style="padding-left:40px"> TextTextTextText</span> <br>
Man <span style="padding-left:40px"> TextTextTextText</span>
What should I use instead?
<style>
table {
border: 0;
border-collapse: collapse;
}
.pl-40 {
padding-left: 40px;
}
</style>
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>Woman</td>
<td class="pl-40">TextTextTextText</td>
</tr>
<tr>
<td>Man</td>
<td class="pl-40">TextTextTextText</td>
</tr>
</table>
</body>
</html>
You might want to use a table:
.left {
text-align: left;
}
.right {
text-align: right;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td class="left">Woman</td>
<td class="right">TextTextTextTop</td>
</tr>
<tr>
<td class="left">Man</td>
<td class="right">TextTextTextBottom</td>
</tr>
</tbody>
</table>
</body>
</html>
If you want some more space between them, then you can add padding-right: 40px; to the .left declaration in the CSS:
.left {
text-align: left;
padding-right: 40px;
}
As Prem Signh said in his answer, you can hide the border with <table style="border: 0; border-collapse: collapse;"> instead of <table>.
Try using something like this:
.left {
display: inline-block;
width: 50px;
}
.right {
padding-left: 40px;
}
<div>
<span class="left">woman</span>
<span class="right">TextTextTextText</span>
</div>
<div>
<span class="left">Man</span>
<span class="right">TextTextTextText</span>
</div>
Related
I am trying to create a profile box where the user would be able to see his own profile picture, and other account specific information and utilities, like their username, settings button, profile page button, etc. The way I went about doing this was with a table element centered using flex. Then, I colored the backgrounds of my divs to see what they are doing. I noticed white lines between the cells of my table, tried some things, did some research, found the border-collapse attribute, and used it. Problem is, only some of my lines went away, as shown in the picture below. Weirder enough, it seems to disappear when I zoom in and out using ctrl + scroll. My guess is that it's some sort of rounding error.
What to do?
.Leftside2 {
flex: 20%;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
}
#profile_picture {
height: 100%;
padding: 5px;
background-color: orange;
display: flex;
justify-content: center;
}
#profile_picture img {
width: 80%;
height: 80%;
}
.friend_list {
width: 90%;
}
<div class="Leftside2">
<table class="profile">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="https://via.placeholder.com/450x400"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
Edit: I tried putting cellpadding="0" and cellspacing="0" inside my and it didn't work. I also tried to explicitly state that margin = 0, padding = 0 in all table elements. I do not think that it's a margin/padding issue, as many have suggested below.
Edited code:
.profile {
width: 90%;
border: 2px solid black;
display: flex;
justify-content: center;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.profile td {
padding: 0;
margin: 0;
}
Second edit:
<html lang = "en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Find a Friend</title>
</head>
<body>
<div class="HeaderMenu">
<div style="margin-left:40px;margin-right:100px;background-color: #008aed;">
<button class="logout_button">Logout</button>
</div>
</div>
<div class="row">
<div class = "left_space"></div>
<div class="Leftside2">
<table class="profile" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 30vh;border-width: 0px">
<div id="profile_picture"><img src="../img/placeholder.png"></div>
</td>
</tr>
<tr>
<td style="border: 0 solid black; background-color: orange">Jill</td>
</tr>
<tr>
<td style="border-width: 0px">Eve</td>
</tr>
<tr>
<td style="border-width: 0px">John</td>
</tr>
</table>
<table class="friend_list">
<tr>
<td>Friends List</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</div>
<div class="Centerside2">
</div>
<div class="Rightside2">
</div>
<div class = "right_space"></div>
</div>
</body>
.profile td {
padding: 0;
}
adding this to your css should solve the problem. or you can add cellpadding="0" in your html table tag.
just adding attribute cellpadding="0" in your table tag will fix your issue.
Try adding this to your table tag:
cellspacing=“0”
Padding refers to the space inside the cell. Cell spacing is about how much space there is outside it.
I am trying to remove the header from only the first page while printing,
or Saving it to PDF
but it's not working
I have tried the below CSS codes but none of theme are working:
I have also visited these link but but none of the answer worked for me
Remove Header from First Page of HTML Generated PDF - CSS
and Delete the footer only on the last page using CSS
#page: first {
#top-left {
content: normal;
}
}
#page :not(:first) {
}
Both of theme didn't worked.
my styles
<style type="text/css">
.page-header,
.page-header-space {
height: 100px;
}
.page-footer,
.page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black;
/* for demo */
background: white;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black;
/* for demo */
background: white;
/* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm;
}
#media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
#page: first {
#top-left {
content: normal;
}
}
.main_paragraph {
white-space: pre-line;
white-space: pre-wrap;
line-height: 25px;
font-size: 16px;
margin-right: 10px;
margin-left: 10px;
text-indent: 30px;
text-align: justify
}
</style>
my Body
<body>
<div class="page-header" style="text-align: center">
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div>
<img src="{{URL::asset("img/logo.jpg")}}" style="width: 90%;display: block;margin: 0 auto;z-index: 1;">
</div>
<table id="main_table" dir="rtl"
style="width: 95%;text-align:center; margin: 0 auto;border-collapse: collapse;" border="1">
<tbody>
<tr style="font-size: 18px;font-weight:bold;height:40px">
<td style="width: 47.5%">sugestion</td>
<td style="width: 7%">date</td>
<td style="width: 46.5%">order</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">
{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
{{-- <td>{{strlen($result[0]->document_text)}}
</td> --}}
#if(strlen($result[0]->document_text)<=977) <td style="vertical-align: top;border-top:hidden;height:65vh"
dir="rtl">
#else
<td style="vertical-align: top;border-top:hidden;" dir="rtl">
#endif
{{$result[0]->document_text}}
<p class="main_paragraph" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="page-footer" style="text-align: center;width:94.5%;margin-left:2.55%">
</div>
</body>
I'm testing it on chrome.
You can use media query in CSS to fix that
media query is used to hide an element when printing web pages. Use #media print query and set the display none or visibility hidden to that element that needs to hide at printing
like this
#media print{
.page-header{
display:none;
}
}
if this doesn't work with you try to add media = print link on an HTML page
like this
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
If still doesn't work try to add CSS code to the HTML page
Like This
<style>
#media print{
.page-header{
display:none;
}
}
</style>
try to do it with Laravel
<div class="header
#if(Route::currentRouteName() === 'yourPage')
{{hied-in-print}}
#endif "></div>
and use this class hied-in-print in #media print
<style>
#media print{
.hied-in-print{
display:none;
}
}
</style>
What i am trying to do is to make HTML similar to this image.
I tried Below HTML with table and with div as well. but text is not aligning proper. Not sure what is the best way to do it. As i am using bootstrap.
Here is my HTML that i tried.
h1{
font-size:45px;
}
<table>
<tr>
<td rowspan="2"><h1>1</h1></td>
<td>Shopping Cart</td>
</tr>
<tr>
<td>small content</td>
</tr>
</table>
You can try with elements to get the result you want.
<div class="item">
<span class="count">1</span>
<div class="txt">
<h2>Shopping Cart</h2>
<p>Manage Your Item list</p>
</div>
<div class="clear"></div>
</div>
<style type="text/css">
.clear {
clear: both;
}
.count {
float: left;
font-size: 45px;
width: 30px;
}
.txt {
margin-left: 40px;
}
.txt h2,
.txt p {
margin: 0;
}
</style>
try this
<style>
.sc-col-4{
width: 33.33%;
background: #ddd;
height: 150px;
}
.left-box{
background:#007bff;
padding: 1.5rem; color: white;
padding-right: 3rem;
padding-left: 3rem;
margin-right:1.3rem;
float:left;
font-size: 50px;
}
.right-box{
float: left;
}
</style>
<div class="sc-col-4">
<div class="left-box">1</div>
<div class="right-box">
<div style="padding-top: 1rem; font-weight:600; font-size: 1.25rem; color: #007bff;">$1.999,50</div>
<div style="color: #868e96; font-weight: 700; font-weight: bold">INCOME</div>
</div>
</div>
h1{
font-size:45px;
}
#bottom{
vertical-align:bottom;
}
#top{
vertical-align:top;
}
td{
padding:0;
margin:0;
line-height:1;
}
<table>
<tr>
<td rowspan="2"><h1>1</h1></td>
<td id='bottom'>Shopping Cart</td>
</tr>
<tr>
<td id='top'>small content</td>
</tr>
</table>
Your code is actually working but the output comes like that due to the size of each cell in table try this :-
<table >
<tr>
<td rowspan="2"><h1>1</h1></td>
<td style="vertical-align:bottom">Shopping Cart</td>
</tr>
<tr>
<td style="vertical-align:top">small content</td>
</tr>
</table>
A solution using styles as mentioned above would probably be cleanest. But if you're looking for something purely within the table element, you could add a nested table as follows.
Hope this helps!
h1 {
font-size: 45px;
}
<table>
<tr>
<td rowspan="2">
<h1>1</h1>
</td>
<td>
<table cellspacing="0">
<tr>
<td>Shopping Cart</td>
</tr>
<tr>
<td>small content</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to find a way to make a cell transparent or semi-transparent. The below code should work but doesn't:
<html>
<style>
op {
opacity:0.3;
filter:alpha(opacity:30)
}
</style>
<body background="background.jpg" style="background: black;">
<table border="1" width="100%" height="222">
<tr>
<td class="op" bgcolor="#FFFFFF" height="216"> </td>
</tr>
</table>
</body></html>
You haven't properly defined the CSS class, class definition must begin with a dot, in your case .op.
Also, your are mixing CSS and HTML attributes, you should only only CSS (note that definitions for HTML tags don't start with a dot):
<html>
<style>
body {
background-image: background.jpg;
background-color: black; /* for testing without the image*/
}
table {
border: 1px;
width: 100%;
height: 222px;
}
td {
height: 216px;
}
.op {
opacity:0.3;
filter:alpha(opacity:30);
background-color: #FFFFFF;
}
</style>
<body>
<table>
<tr>
<td class="op"> </td>
</tr>
</table>
</body></html>
I can't get my two tables to align next to each other. The second blue box (of smaller boxes) keeps sitting below the first box. I've tried using "display: inline-block" and "float: left" on every single element, but nothing happens. Please help?
#zero-data {
border: 1px solid black;
height: 200px;
width: 200px;
text-align: center;
}
#table-12 tr {
display: inline-block;
}
.data-1234 {
border: 1px solid blue;
width: 95px;
height: 95px;
text-align: center;
}
#table-34 tr {
display: inline-block;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Problem.css">
</head>
<body>
<!-- big table -->
<table id="zero-table">
<tr id="zero-row">
<td id="zero-data">0</td>
</tr>
</table>
<!-- tables 1 & 2 -->
<table id="table-12">
<tr id="row-1">
<td class="data-1234">1</td>
</tr>
<tr id="row-2">
<td class="data-1234">2</td>
</tr>
</table>
<!-- tables 3 & 4 -->
<table id="table-34">
<tr id="row-3">
<td class="data-1234">3</td>
</tr>
<tr id="row-4">
<td class="data-1234">4</td>
</tr>
</table>
</body>
</html>
Like this?
.wrapper {
background-color: red;
}
#zero-table,
#table-12,
#table-34 {
float: left;
}
#zero-data {
border: 1px solid black;
height: 200px;
width: 200px;
text-align: center;
}
.data-1234 {
border: 1px solid blue;
width: 95px;
height: 95px;
text-align: center;
}
<div class="wrapper">
<table id="zero-table">
<tr id="zero-row">
<td id="zero-data">0</td>
</tr>
</table>
<table id="table-12">
<tr id="row-1">
<td class="data-1234">1</td>
</tr>
<tr id="row-2">
<td class="data-1234">2</td>
</tr>
</table>
<table id="table-34">
<tr id="row-3">
<td class="data-1234">3</td>
</tr>
<tr id="row-4">
<td class="data-1234">4</td>
</tr>
</table>
</div>
Give ghost columns a try. Place it between each of the tables.
<!-- your table -->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="150" align="left" valign="top">
<![endif]-->
<!-- your table -->
Once you place it in the tables should start aligning properly. Change the width of the TD to whatever it's supposed to be in your code. Let me know you go.
No need to add Float to every element. Since you want the second and third tables to appear beside the first table, you just add Float to that first table:
#zero-table { float: left; }
See JSFiddle