I'm trying to acheive the following (taken from dropbox):
My snippet (in full page):
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 1rem !important
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px; /* Don't forget this, required for the stickiness */
}
<table style="margin-top: 150px; margin-left: auto; margin-right: auto;">
<thead>
<tr class="red">
<th></th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
Sub
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
Sub
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display: flex; align-items: center; width: 100%;">
<span>
<div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;">
<button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button>
</div>
</span>
<span style="margin-left: 15px; display: flex;">Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
Here you go...
The easiest way to achieve this circle with the letter "i" inside is to use Font Awesome icon. Move the icon to the left by setting margin-left: -25px;. You have to set z-index: 100; (the value is not important, it could be 1) to push the icon in front of everything else. It's necessary to set position: absolute;, otherwise the z-index won't work. Also, set background-color: white; so that the line of the table isn't visible in the background of the icon (try to remove the background-color to see what I'm talking about).
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th,
td {
border: 1px solid black;
padding: 1rem !important;
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px;
height: 250px;
/* Don't forget this, required for the stickiness */
}
.fa-info-circle {
position: absolute;
background-color: white;
font-size: 20px;
margin-top: -7%;
margin-left: -24%;
z-index: 100;
}
<!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>
<script src='https://use.fontawesome.com/releases/v5.15.3/js/all.js' data-auto-replace-svg='nest'></script>
</head>
<body>
<table style='margin-top: 150px; margin-left: auto; margin-right: auto;'>
<thead>
<tr class='red'>
<th> <i class='fas fa-info-circle'></i> </th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
<a href='#' class='pricing-plans__cta button button--primary'>Sub</a>
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
<a href='#' class='pricing-plans__cta button button--primary'>Sub</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style='display: flex; align-items: center; width: 100%;'>
<span>
<div style='display: inline-block; width: 22px; height: 22px; margin-left: -11px;'>
<button style='width: 22px; height: 22px; display: block; background: transparent;' aria-label='More info'></button>
</div>
</span>
<span style='margin-left: 15px; display: flex;'>Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
</body>
</html>
You can simply do that by setting the position attribute of the button to absolute and then use it to position according to its ancestor
Here is an MDN Link to know more about this
Add this CSS code to your file and it will work
button{
position: absolute;
left: -12px;
}
I added <span class="information">i</span> into your 1st td and then added the CSS as below:
/* ADDED */
td::first-child{
position:relative;
}
.information{
position:absolute;
left: -12px;
width: 20px;
height: 20px;
border:1px solid black;
border-radius: 100%;
text-align: center;
background: white;
}
DEMO
table {
text-align: left;
position: relative;
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 1rem !important
}
tr.red th {
background: #FFF;
}
th {
padding: 50px;
background: white;
position: sticky;
top: 111px; /* Don't forget this, required for the stickiness */
}
/* ADDED */
td::first-child{
position:relative;
}
.information{
position:absolute;
left: -12px;
width: 20px;
height: 20px;
border:1px solid black;
border-radius: 100%;
text-align: center;
background: white;
}
<table style="margin-top: 150px; margin-left: auto; margin-right: auto;">
<thead>
<tr class="red">
<th></th>
<th>
<div>
Free
</div>
<div>
0 / month
</div>
Sub
</th>
<th>
<div>
Premium
</div>
<div>
99,99€ / month
</div>
Sub
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="information">i</span>
<div style="display: flex; align-items: center; width: 100%;">
<span>
<div style="display: inline-block; width: 22px; height: 22px; margin-left: -11px;">
<button style="width: 22px; height: 22px; display: block; background: transparent;" aria-label="More info"></button>
</div>
</span>
<span style="margin-left: 15px; display: flex;">Storage</span>
</div>
</td>
<td>2 Go</td>
<td>15 To</td>
</tr>
</tbody>
</table>
This will work for u
* {
margin: 0px;
padding: 0px;
}
td {
position: relative;
padding: 40px;
border: 1px solid;
margin: 0px;
font-family: 'arial';
}
td a {
font-family: initial;
position: absolute;
font-size: 22px;
font-style: italic;
text-decoration: none;
left: -5%;
top: 38%;
height: 25px;
width: 25px;
text-align: center;
border-radius: 50%;
color: black;
background-color: white;
border: 1px solid;
}
table {
margin: 50px;
border-collapse: collapse;
}
<table>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
<tr>
<td>i Espace de stockage</td>
<td>2 Go</td>
<td>2 To (2000 go)</td>
</tr>
</table>
Related
I would like to draw the following in my web page:
where the three buttons are submit buttons.
I managed to do most but having a problem drawing the vertical lines.
here is my code:
th,
td {
padding: 10px;
}
table.center {
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 50px 0;
}
span {
border-bottom: 2px solid gray;
border-right: 2px solid gray;
padding: 2px;
display: inline-block;
width: 100%;
}
.button {
width: 100%;
padding: 10px;
font: bold;
font-size: 20px;
border: none;
}
.button_blue {
background-color: LightSkyBlue;
}
.button_red {
background-color: OrangeRed;
}
.button_yellow {
background-color: yellow;
}
.boxed {
width: 600px;
border: 3px solid green;
padding: 5px;
margin: 5px;
margin-left: auto;
margin-right: auto;
}
.circle {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
border: none;
font-size: 30px;
font: bold;
text-align: center;
display: inline-block;
;
}
<div style="text-align:center">
<u style="color:Red;">
<h1 style="color:DodgerBlue;font-size:3em;">
Hashi
</h1>
</u>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<p></p>
<div style="text-align:center">
<p></p>
<table class="center">
<tr>
<td></td>
<td style="border-bottom:4px solid black"></td>
</tr>
<tr>
<td style="text-align:center"><text style="color:DodgerBlue;font-size: 2em;"> Build bridges </text></td>
<td>
<span> {{ form.create(class_="button button_blue") }} </span>
</td>
</tr>
<tr>
<td style="text-decoration: line-through; text-decoration-thickness:5px;">
<div class="circle" style="background-color:yellow;">
3
</div>
<div class="circle" style="background-color:OrangeRed;">
2
</div>
<div class="circle" style="background-color:lightgreen;">
5
</div>
</td>
<td>
<span>{{ form.load(class_="button button_red") }}</span>
</td>
</tr>
<tr>
<td>
<div class="circle" style="background-color:blue;color:yellow;">
4
</div>
</td>
<td>
<span>{{ form.solve(class_="button button_yellow") }}</span>
</td>
</tr>
</table>
</div>
</form>
</div>
You shouldn't use tables to do design, but if that's what you want, then I will come up with a solution for it.
Don't use inline styles. Refactor them to classes, so the HTML is readable.
Set position: relative on all TDs.
Place each element in a TD of its own.
Make the circular buttons absolute to position them on top of bottom right corner.
Use colspan to place the elements relative to each other.
Use border to draw the lines.
/** UNCOMMENT TO REVEAL THE ENTIRE STRUCTURE OF THE TABLE **/
/*td {
border: 2px solid rgba(0, 0, 0, 0.3) !important;
}*/
body {
font-family: Helvetica;
}
h1 {
color: DodgerBlue;
font-size: 4em;
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 1px;
margin: 2rem auto 1rem;
}
table {
border-collapse: collapse;
margin-left: auto;
margin-right: 1rem;
}
td.subtitle {
color: DodgerBlue;
font-size: 3em;
padding: 1rem;
}
td {
position: relative;
text-align: center;
border: 4px none black;
}
td.right-line {
border-right-style: solid;
}
td.bottom-line {
border-bottom-style: solid;
}
td.double-stroke {
border-width: 4px;
border-style: solid;
}
button {
display: flex;
justify-content: center;
align-items: center;
}
button.big {
margin: 1rem;
padding: 1rem 2rem;
font-size: 1.3rem;
width: calc(100% - 2rem);
box-sizing: border-box;
}
button.circle {
position: absolute;
right: 0px;
bottom: 0px;
transform: translate(50%, 50%);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
border: none;
font-size: 1.1rem;
font-weight: bold;
}
.blue.big {
background-color: LightSkyBlue;
}
.red {
background-color: OrangeRed;
}
.yellow {
background-color: yellow;
}
.lightgreen.circle {
background-color: lightgreen;
}
.blue.circle {
background-color: blue;
color:yellow;
}
<form action="" method="post" novalidate>
<table>
<tr>
<td colspan="4"></td>
<td class="bottom-line"><h1>Hashi</h1></td>
</tr>
<tr>
<td> </td>
<td colspan="3" class="subtitle right-line">Build bridges</td>
<td><button class="blue big">Create a Puzzle</button></td>
</tr>
<tr>
<td><button class="yellow circle">3</button></td>
<td class="bottom-line"><button class="red circle">2</button></td>
<td class="bottom-line right-line" colspan="2"><button class="lightgreen circle">5</button></td>
<td><button class="red big">Upload External</button></td>
</tr>
<tr>
<td class="right-line double-stroke"><button class="blue circle">4</button></td>
<td colspan="3"> </td>
<td><button class="yellow big">Run Internal</button></td>
</tr>
</table>
</form>
I have a piece of CSS I am working with. Whenever I add the "display: flex" property to .student, the border suddenly doubles. I need the flex property because I want the text to be centered vertically next to the image inside of the .student table data cell. How can I get rid of this pesky double border? The double border goes away whenever I remove the display:flex property, but then the text is no longer vertically next to the image. I've tried whitespace, border collapse, and several others without any luck.
Codepin: https://codepen.io/dansbyt/pen/dyvoejG?editors=1100
CSS:
/* ------------{GRADEBOOK}------------ */
.gradebook {
position: absolute;
top: 60px; left: 0;
width: 100vw; height: calc(100vh - 126px);
overflow-y: scroll;
box-sizing: border-box;}
/* Table styling*/
table {table-layout: fixed; border-collapse: collapse;}
/* Table heading styling */
thead th {
height: 60px; width: 100px;
top: 0; z-index: 2;
position: -webkit-sticky; position: sticky;
border-right: 1px solid gray;
background-color: white;}
thead th:first-child {left: 0; z-index: 10;}
th {
padding: 10px 16px;
text-align: left;
font-weight: normal;
color: gray}
table .duedate {font-size: 14px; margin-bottom: 8px}
table .title {font-size: 18px; color: #5B7042}
/* Table data styling */
td {
text-align: center;
border: 1px solid gray;
background-color: white}
td.late{background-color: #EA5D6B}
td input {
text-align: center;
padding: 4px; margin: 0;
width: 114px;
border: none;}
/* Student Name styling */
.student {
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center}
.pic{
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;}
.pic img{display: none}
/* ------------{CONTROLS}------------ */
.controls {
display: flex;
position: absolute;
bottom: 10px; left: 0;
width: 100vw; height: 56px;
border-top: 1px solid #DDDDDD}
HTML:
<link rel="stylesheet" href="../style.css">
<div class='gradebook'>
<table>
<thead>
<tr>
<th style='width: 200px'></th>
<th>
<div class='duedate'>Due Oct 08</div>
<div class='title'>Mayflower Vocabulary</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>Wax Museum</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>American Revolution</div>
</th>
<th>
<div class='duedate'>Due Oct 27</div>
<div class='title'>Jamestown</div>
</th>
<th>
<div class='duedate'>Due Nov 1</div>
<div class='title'>Comparing Colonies</div>
</th>
</tr>
</thead>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>Jane Doe</span>
</td>
<td><input type='text' value='-'></td>
<td class='late'><input type='text' value='10'></td>
<td><input type='text' value='9.5'></td>
<td><input type='text' value='10'></td>
<td><input type='text' value='5'></td>
</tr>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>John Doe</span>
</td>
<td><input type='text' value='-'></td>
<td><input type='text' value='8'></td>
<td><input type='text' value='9'></td>
<td><input type='text' value='10'></td>
<td class='late'><input type='text' value='9'></td>
</tr>
</table>
</div>
<div class='controls'>
</div>
Image of issue:
Instead of using border: 1px solid gray you can try this.
td {
text-align: center;
border: 1px solid gray;
border-bottom: 0;
border-right: 0;
background-color: white
}
tr:last-of-type td {
border-bottom: 1px solid gray;
}
td:last-of-type {
border-right: 1px solid gray;
}
/* ------------{GRADEBOOK}------------ */
.gradebook {
position: absolute;
top: 60px;
left: 0;
width: 100vw;
height: calc(100vh - 126px);
overflow-y: scroll;
box-sizing: border-box;
}
/* Table styling*/
table {
table-layout: fixed;
border-collapse: collapse;
}
/* Table heading styling */
thead th {
height: 60px;
width: 100px;
top: 0;
z-index: 2;
position: -webkit-sticky;
position: sticky;
border-right: 1px solid gray;
background-color: white;
}
thead th:first-child {
left: 0;
z-index: 10;
}
th {
padding: 10px 16px;
text-align: left;
font-weight: normal;
color: gray
}
table .duedate {
font-size: 14px;
margin-bottom: 8px
}
table .title {
font-size: 18px;
color: #5B7042
}
/* Table data styling */
td {
text-align: center;
border: 1px solid gray;
border-bottom: 0;
border-right: 0;
background-color: white
}
tr:last-of-type td {
border-bottom: 1px solid gray;
}
td:last-of-type {
border-right: 1px solid gray;
}
td.late {
background-color: #EA5D6B
}
td input {
text-align: center;
padding: 4px;
margin: 0;
width: 114px;
border: none;
}
/* Student Name styling */
.student {
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: -1px;
}
.pic {
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;
}
.pic img {
display: none
}
/* ------------{CONTROLS}------------ */
.controls {
display: flex;
position: absolute;
bottom: 10px;
left: 0;
width: 100vw;
height: 56px;
border-top: 1px solid #DDDDDD
}
<link rel="stylesheet" href="../style.css">
<div class='gradebook'>
<table>
<thead>
<tr>
<th style='width: 200px'></th>
<th>
<div class='duedate'>Due Oct 08</div>
<div class='title'>Mayflower Vocabulary</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>Wax Museum</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>American Revolution</div>
</th>
<th>
<div class='duedate'>Due Oct 27</div>
<div class='title'>Jamestown</div>
</th>
<th>
<div class='duedate'>Due Nov 1</div>
<div class='title'>Comparing Colonies</div>
</th>
</tr>
</thead>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>Jane Doe</span>
</td>
<td><input type='text' value='-'></td>
<td class='late'><input type='text' value='10'></td>
<td><input type='text' value='9.5'></td>
<td><input type='text' value='10'></td>
<td><input type='text' value='5'></td>
</tr>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>John Doe</span>
</td>
<td><input type='text' value='-'></td>
<td><input type='text' value='8'></td>
<td><input type='text' value='9'></td>
<td><input type='text' value='10'></td>
<td class='late'><input type='text' value='9'></td>
</tr>
</table>
</div>
<div class='controls'>
</div>
My assumption is that problem arises from clashing between two layout alghorithms, table and flex one. Td belongs to table one and putting flex there just make problems.
So only solution is to wrap td content with div, and put flex onto that div.
table{
border-collapse: collapse;
}
td{
border: 1px solid;
}
.flex{
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<th>flex</th>
<th>flex</th>
<tr>
<td class='flex'>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td class='flex'>...</td>
</tr>
</table>
<table>
<th>div flex</th>
<th>div flex</th>
<tr>
<td> <div class='flex'>...</div></td>
<td> <div class='flex'>...</div></td>
</tr>
<tr>
<td> <div class='flex'>...</div></td>
<td> <div class='flex'>...</div></td>
</tr>
</table>
</body>
</html>
The below picture represents a timeline. Here the task "Exercise" starts from 8:00 to 8:15 and which has been marked with light-blue background color. The other two tasks - first one is "Travel to work" and second one is "Plan day" - are getting overlapped because the former task ("Travel to work") starts from 8:25 to 8:55 and the later task ("Plan day") starts from 8:30 to 9:00. So the overlapping tasks should show as given in the picture.
I tried to implement this using HTML table and css but I am really stuck to move further and its not working the way it is showing in the picture.
<style>
.line{
/* width: 100%; */
border-top: 1px solid black;
/* position: absolute; */
background-color: #ADD8E6;
width: 45%;
height: 30pt;
}
.halfAnHour{
font-size: 11px;
/* text-align: right; */
}
.title{
font-size: 10px;
}
.starttime{
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.time{
border-top: 1px solid black;
width: 10%;
height: 30pt;
}
</style>
<body>
<table style="width: 100%;">
<tr>
<td class="time" style="width: 10%;height: 30pt;">8:00</td>
<td class="line" style="width: 45%;height: 30pt;">Excercise</td>
<td class="line" style="width: 45%;height: 30pt;"> </td>
</tr>
<tr>
<td class="time" style="height: 30pt;">8:30</td>
<td class="line">Travel to work</td>
<td class="line"> </td>
</tr>
<tr>
<td class="time">9:00</td>
<td class="line">Plan day</td>
<td class="line"> </td>
</tr>
<tr>
<td class="time">9:30</td>
<td class="line">Review yesterday's comments</td>
<td class="line"> </td>
</tr>
</table>
</body>
You could use CSS Flexbox and some manipulation of position to overlap tasks occurring in the same hour. This is a good start to achieving a similar layout to the image you provided.
.line{
/* width: 100%; */
border-top: 1px solid black;
/* position: absolute; */
background-color: #ADD8E6;
width: 100%;
height: 30pt;
}
.title{
font-size: 10px;
}
.time{
border-top: 1px solid black;
width: 49px;
width: auto;
height: 30pt;
color: #555;
}
table tr {
display: flex;
align-items: center;
}
table tr td {
flex: initial;
}
table tr td:not(:first-child) {
border-left: .19rem solid blue;
}
table .overlap {
margin-top: .75rem;
}
table .overlap td {
height: 3rem;
margin-bottom: -7px;
}
table .overlap > .time {
padding-right: .6rem;
}
table .overlap .line:last-child {
position: relative;
left: -.5px;
bottom: -2px;
}
.hour {
font-size: 1.3rem;
}
<body>
<table style="width: 100%;">
<tr>
<td class="time hour">8:00</td>
<td class="line">Excercise</td>
</tr>
<tr class="overlap">
<td class="time half">8:30</td>
<td class="line">Plan day</td>
<td class="line" style="margin-bottom: .5rem">Travel to work</td>
</tr>
<tr>
<td class="time hour">9:00</td>
<td class="line">Review yesterday's comments</td>
</tr>
</table>
</body>
I'm fairly new to HTML so please bear with me. I'm trying to create a printable invoice in html. I'm having an issue with placing the top 2 tables side by side. Despite using inline-block, the tables are not being stacked next to each other
What am I doing wrong? Any help or suggestion would be greatly appreciated!
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
check out this hope this would work..capsule tables inside div and adjust using float property hope it would solve ur issue..
.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<div class="container">
<div class="floatLeft">
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
</div>
<div class="floatRight">
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table></div>
</div>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
i used ur code and mould it little like wrapping tables inside div and add css accordingly
The easiest : You can turn those 2 tables into table-cell, so they'll stick together side by side (demo below),
else: you'll need to float them or a wrapper to hold them and some extra CSS to keep them side by side no matter what the width avalaible. (possibly inline-block along white-space )
.Info {
display:table-cell;
}
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
/*display: block;*/
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
Try implementing the declaration display: grid to build your tables side-by-side. The grid value offers fully responsive 'boxes' that can be stacked as you wish.
This is a simple layout~
HTML
<section class="tableGrid">
<div>
<div>
<p>Row 1 - Table 1</p>
</div>
<div>
<p>Row 2 - Table 1</p>
</div>
</div>
<!-- ********************** -->
<div>
<div>
<p>Row 1 - Table 2</p>
</div>
<div>
<p>Row 2 - Table 2</p>
</div>
</div>
</section>
and CSS
.tableGrid {
margin: 4vh 8vw;
padding: 16px;
display: grid;
grid-template-rows: auto;
grid-gap: 16px;
}
.table {
border: 4px dotted red;
}
#media (min-width: 800px) {
.tableGrid {
margin: 8vh 16vw;
padding: 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fit: minmax(88px 1fr);
grid-gap: 24px;
}
}
Check out this pen and if you like what you see learn more about using grid here.
Basically right now I have everything in a straight line, I know it isn't responsive, not part of the task. I want to change it so I have 'clock hours, incentive, off clock, and regular hours' on the top row & overtime hrs, personal, vacation, and holiday' directly beneath it. And then have total hours off to the side near the signature area. I have some thoughts on how to do it but I feel like it could be done in a simple way so I don't know exactly the best way of tackling it.
/* *{
margin: 0;
padding: 0;
} */
/* #page {
size: 8.5in 11in;
} */
h2 {
text-align: center;
}
.signandauth {
/*div for authorized, signature & their textboxes*/
position: absolute;
top: 0;
right: 0;
margin-right: 20px;
margin-top: 20px;
}
.dateSection {
/*div for date script*/
position: absolute;
top: 0;
left: 0;
margin-left: 20px;
margin-bottom: 20px;
margin-top: 65px;
}
.section1 {
padding: 30px 0;
border: 4px solid black;
/* margin-right: 20px; */
}
.section2 {
padding: 70px 0;
border: 4px solid black;
}
label {
border: 1px solid black;
padding: 0.2em;
margin: 0.2em;
display: inline;
}
p {
margin: 0.3em;
padding: 0.3em;
font-weight: bold;
display: inline;
text-align: center;
}
#date {
float: left;
}
#authorized {
/*text box*/
width: 170px;
height: 30px;
float: right;
}
#authorizeP {
/*the label*/
float: right;
}
#signature {
width: 170px;
height: 30px;
float: right;
}
#signP {
float: right;
}
table,
th {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
float: right;
}
td {
width: 90px;
border: 1px solid black;
padding: 5px;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<body>
<title>Time Card</title>
<div class="section1">
<h2>Time Card: AWS</h2>
<div class="dateSection">
<p id="date"></p>
<script>
var date = new Date();
document.getElementById("date").innerHTML = date.toDateString();
</script>
</div>
<br>
<br>
<br>
<p>Clock Hours</p>
<label id="clockHours">0.00</label>
<p>Incentive</p>
<label id="Incentive">0.00</label>
<p>Off Clock</p>
<label id="offClock">0.00</label>
<p>Regular Hours</p>
<label id="regularHours">0.00</label>
<p>Overtime Hours</p>
<label id="overtimeHours">0.00</label>
<p>Total Hours</p>
<label id="totalHours">0.00</label>
<p>Personal</p>
<label id="personal">0.00</label>
<p>Vacation</p>
<label id="vacation">0.00</label>
<p>Holiday</p>
<label id="holiday">0.00</label>
<div class="signandauth">
<p id="authorizeP">Authorized</p>
<br>
<br>
<label id="authorized"></label>
<br>
<br>
<br>
<p id="signP">Employee Signature</p>
<br>
<label id="signature"></label>
</div>
</div>
<br>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="section2">
<table>
<tr>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
</table>
</div>
</body>
</html>
How about putting them in a 2x4 table?
<br>
will break onto a new line, that should do what you're hoping.
<table >
<tr>
<th>Clock Hours</th>
<th>Incentive</th>
<th>Off Clock</th>
<th>Regular Hours</th>
</tr>
<tr>
</tr>
<tr>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="clockHours">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="Incentive">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="offClock">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="regularHours">0.00</label>
</tr>
</table>
<br>
<table >
<tr>
<th>Overtime Hours</th>
<th>Personal</th>
<th>Vacation</th>
<th>Holiday</th>
</tr>
<tr>
</tr>
<tr>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="clockHours">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="Incentive">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="offClock">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="regularHours">0.00</label>
</tr>
</table>