I'm having a tiny issue where in my table I have gotten the entire TD clickable, and even managed to get the td:hover to work.
However I've come across a point where I need to have blocks that say "Incomplete" (because I don't know how to hide cells without messing up the block sizes). How can I fix it where the entire cell highlights but doesn't highlight the Incomplete ones?
td a:hover {
background: #c2ceb5;
display: block;
width: 100%;
height: 100%;
}
td a {
display: block;
width: 100%;
height: 100%;
}
td {
position: relative;
}
td a:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<table align="" style="border: 0px solid #ffffff; background-color: #5e913f;" class="mceEditable" border="1" cellpadding="5" cellspacing="0" height="207.75" width="1060">
<tbody>
<tr>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<a class="" title="Super" href="http://handlingmod.jimdo.com/vehicle-list/super/adder/"><span style="color: #ffffff;">Adder</span></a>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<a class="" title="Super" href="http://handlingmod.jimdo.com/vehicle-list/super/vacca/"><span style="color: #ffffff;">Vacca</span></a>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
</tr>
<tr>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
</tr>
<tr>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 0px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
<td style="text-align: center; border: 5px solid #ffffff; width: 0px;">
<span style="color: #dddddd;">Uncomplete</span>
</td>
</tr>
</tbody>
</table>
<p>
<span style="color: #ffffff;"> </span>
</p>
See if this works - http://jsfiddle.net/2pfL7toz/
td {
position: relative;
line-height: 60px; /*a bit hacky but works*/
}
td a, td span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-decoration: none;
}
td a:hover {
background: #c2ceb5;
}
How about this?
CSS:
td a:hover {
background: #c2ceb5;
display: block;
}
td a, td span {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display: block;
padding-top:20px;
}
td {
position: relative;
}
Note: This solution degrades slightly if your text wraps within a cell.
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'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>
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 have a HTML part that looks like this:
Is it possible to have an equal border with for every word? And how can I achieve a line break after "Köln"? I tried <br/>, but it doesn't work. Something that looks like this:
Here is the HTML codepart:
function openLink(url) {
window.open(url);
}
#sideNavBox {
display: none
}
#contentBox {
margin-left: 0px
}
.dd13:hover {
cursor: pointer;
}
.dd13 {
color: #FFFFFF;
Font: 12px Arial background-color:: #48A040;
Padding: 3px 3px 3px 3px;
}
<font size="3"><b>Seminare nach Standort filtern</b></font>
<div>
<font size="3"><b><br/></b></font>
<div>
<br/>
<table class="dd13">
<tbody>
<tr>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Ulm</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Taufkirchen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Oberkochen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Köln</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Friedrichshafen</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Wetzlar</td>
<td style="background-color: #ffffff;"> </td>
<td onclick="openLink('/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel');" class="dd13" style="color: black; border: 3px solid limegreen; font-size: 17px;">Kiel</td>
</tr>
</tbody>
</table>
<p>
<br/>
</p>
<p>To register yourself to a seminar please click on this icon
<a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
<a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div>
</div>
I suggest you to forget the "table" element for these cards, then try it with "span" and flexbox. you can set fixed width to it easily and it automatically breaks the line itself.
.container {
display: flex;
flex-wrap: wrap;
}
.card {
display: flex;
width: 200px;
margin: 5px;
border-radius: 4px;
background: #aaa;
border: 1px solid greenyellow;
text-align: center;
padding: 5px;
}
<div class="container">
<span class="card">example 1</span>
<span class="card">Lorem Ipsum Dolor</span>
<span class="card">example</span>
<span class="card">test</span>
<span class="card">paragraph</span>
<span class="card">Day</span>
<span class="card">Night</span>
</div>
Have a look at flex
Note the click below does not open a page because the stacksnippet sandbox is blocking new windows
window.addEventListener("load", function() {
document.getElementById("nav").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.classList.contains("link")) {
window.open(tgt.getAttribute("data-link"));
[...document.querySelectorAll(".link.active")].forEach(lnk => lnk.classList.remove("active"));
tgt.classList.add("active");
}
})
})
#nav {
display: flex;
flex-wrap: wrap;
flex: 1 1 0px
}
.link {
max-width: 150px;
padding: 3px;
margin: 10px;
border: 2px solid lime;
border-radius: 15px;
flex-basis: 100%;
text-align: center;
cursor: pointer;
}
.active {
background-color: lime
}
<h3><b>Seminare nach Standort filtern</b></h3>
<div id="nav">
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm">Ulm</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen">Taufkirchen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen">Oberkochen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln">Köln</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen">Friedrichshafen</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar">Wetzlar</div>
<div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel">Kiel</div>
</div>
<div id="register">
<p>To register yourself to a seminar please click on this icon
<a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon
<a title="Book for me" class="book-for-user-button"></a>.<br/></p>
</div>
When you are using table, every row should be in a <tr>. So for line break it's better to add a new <tr>. and if you want to have same width for your cells, you can set width for <td>. For example:
<style>
table {
table-layout: fixed ;
width: 100% ;
}
td {
width: 25% ;
text-align: center;
color: black;
border: 3px solid limegreen;
font-size: 17px
}
</style>
and your table:
<table class="dd13">
<tbody>
<tr>
<td onclick="openLink(#);" class="dd13">Ulm</td>
<td onclick="openLink(#);" class="dd13">Taufkirchen</td>
<td onclick="openLink(#);" class="dd13">Oberkochen</td>
<td onclick="openLink(#);" class="dd13">Köln</td>
</tr>
<tr>
<td onclick="openLink(#);" class="dd13">Friedrichshafen</td>
<td onclick="openLink(#);" class="dd13">Wetzlar</td>
<td onclick="openLink(#);" class="dd13">Kiel</td>
</tr>
</tbody>
</table>
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>