Подробнее ... Я хочу, чтобы все это поместилось на листе бумаги размером 8,5х11, теперь оно печатает на ~ 4 страницах.Но также, что более важно, я хочу, чтобы это было почти идентично приложенному изображению.сумма и число внизу должны быть в той же строке, что и стимул ... вне часов.Также полная строка должна быть серой.
Пример конечной цели:
html:
<!DOCTYPE html>
<html>
<head>
<title>time card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="printPage">
<p id="title">TIMECARD<p id="authorize">Authorized</p>
<p id="signature">Employee Signature</p>
</p>
<p id="name">John Doe - JXD</p>
<input id="signBox" type="text" name="signBox"><input id="authBox" type="text" name="authBox">
</div>
<br>
<br>
<div id="section1">
<p id="header">WEEKLY HOURS</p>
<table>
<tr>
<th>Clocked</th>
<th>Regular</th>
<th>Overtime</th>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th>Off-Clock</th>
</tr>
<tr>
<td id ="data1">4.35</td>
<td id="data1">0.00</td>
<td id="data1">0.00</td>
<td id="data1">0.00</td>
<td id="data1">0.00</td>
<td id="data1">0.00</td>
<td id="data1">0.00</td>
<td id="data1">0.00</td>
</tr>
<p id="s1total">Total</p>
<br>
<p id="totalnum">4.35</p>
</table>
</div>
<div id="section2">
<p id="header2">WED 10/3/2018</p>
<table>
<tr>
<th>Shift start</th>
<th>Time In</th>
<th>Time Out</th>
<th>Break 1</th>
<th>Break 2</th>
<th>Break Hours</th>
<th>Clocked Hours</th>
<th>Payable</th>
</tr>
<tr>
<td id="data1">9:00 AM</td>
<td id="data1">8:52 AM</td>
<td id="data1">-</td>
<td id="data1">11:30 AM- <br>12:00 PM</td>
<td id="data1">-</td>
<td id="data1">0.5</td>
<td id="data1">4.85</td>
<td id="data1">4.35</td>
</tr>
<tr>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th>Off-Clock</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<p id = "s2total">Total</p>
<br>
<p id="totalnum2">4.35</p>
</tr>
</table>
<p id="header2">THUR 10/4/2018</p>
<table>
<tr>
<th>Shift start</th>
<th>Time In</th>
<th>Time Out</th>
<th>Break 1</th>
<th>Break 2</th>
<th>Break Hours</th>
<th>Clocked Hours</th>
<th>Payable</th>
</tr>
<tr>
<td id="data1">9:00 AM</td>
<td id="data1">8:52 AM</td>
<td id="data1">-</td>
<td id="data1">11:30 AM- <br>12:00 PM</td>
<td id="data1">-</td>
<td id="data1">0.5</td>
<td id="data1">4.85</td>
<td id="data1">4.35</td>
</tr>
<tr>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th>Off-Clock</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<p id = "s2total">Total</p>
<br>
<p id="totalnum2">4.35</p>
</tr>
</table>
<p id="header2">FRI 10/5/2018</p>
<table>
<tr>
<th>Shift start</th>
<th>Time In</th>
<th>Time Out</th>
<th>Break 1</th>
<th>Break 2</th>
<th>Break Hours</th>
<th>Clocked Hours</th>
<th>Payable</th>
</tr>
<tr>
<td id="data1">9:00 AM</td>
<td id="data1">8:52 AM</td>
<td id="data1">-</td>
<td id="data1">11:30 AM- <br>12:00 PM</td>
<td id="data1">-</td>
<td id="data1">0.5</td>
<td id="data1">4.85</td>
<td id="data1">4.35</td>
</tr>
<tr>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th>Off-Clock</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<p id = "s2total">Total</p>
<br>
<p id="totalnum2">4.35</p>
</tr>
</table>
<p id="header2">SAT 10/6/2018</p>
<table>
<tr>
<th>Shift start</th>
<th>Time In</th>
<th>Time Out</th>
<th>Break 1</th>
<th>Break 2</th>
<th>Break Hours</th>
<th>Clocked Hours</th>
<th>Payable</th>
</tr>
<tr>
<td id="data1">9:00 AM</td>
<td id="data1">8:52 AM</td>
<td id="data1">-</td>
<td id="data1">11:30 AM- <br>12:00 PM</td>
<td id="data1">-</td>
<td id="data1">0.5</td>
<td id="data1">4.85</td>
<td id="data1">4.35</td>
</tr>
<tr>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th>Off-Clock</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<p id = "s2total">Total</p>
<br>
<p id="totalnum2">4.35</p>
</tr>
</table>
<p id="header2">SUN 10/7/2018</p>
<table>
<tr>
<th>Shift start</th>
<th>Time In</th>
<th>Time Out</th>
<th>Break 1</th>
<th>Break 2</th>
<th>Break Hours</th>
<th>Clocked Hours</th>
<th>Payable</th>
</tr>
<tr>
<td id="data1">9:00 AM</td>
<td id="data1">8:52 AM</td>
<td id="data1">-</td>
<td id="data1">11:30 AM- <br>12:00 PM</td>
<td id="data1">-</td>
<td id="data1">0.5</td>
<td id="data1">4.85</td>
<td id="data1">4.35</td>
</tr>
<tr>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th>Off-Clock</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<p id = "s2total">Total</p>
<br>
<p id="totalnum2">4.35</p>
</tr>
</table>
<p id="header2">MON 10/8/2018</p>
<table>
<tr>
<th>Shift start</th>
<th>Time In</th>
<th>Time Out</th>
<th>Break 1</th>
<th>Break 2</th>
<th>Break Hours</th>
<th>Clocked Hours</th>
<th>Payable</th>
</tr>
<tr>
<td id="data1">9:00 AM</td>
<td id="data1">8:52 AM</td>
<td id="data1">-</td>
<td id="data1">11:30 AM- <br>12:00 PM</td>
<td id="data1">-</td>
<td id="data1">0.5</td>
<td id="data1">4.85</td>
<td id="data1">4.35</td>
</tr>
<tr>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th>Off-Clock</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<p id = "s2total">Total</p>
<br>
<p id="totalnum2">4.35</p>
</tr>
</table>
<p id="header2">TUE 10/9/2018</p>
<table>
<tr>
<th>Shift start</th>
<th>Time In</th>
<th>Time Out</th>
<th>Break 1</th>
<th>Break 2</th>
<th>Break Hours</th>
<th>Clocked Hours</th>
<th>Payable</th>
</tr>
<tr>
<td id="data1">9:00 AM</td>
<td id="data1">8:52 AM</td>
<td id="data1">-</td>
<td id="data1">11:30 AM- <br>12:00 PM</td>
<td id="data1">-</td>
<td id="data1">0.5</td>
<td id="data1">4.85</td>
<td id="data1">4.35</td>
</tr>
<tr>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th>Off-Clock</th>
</tr>
<tr>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<p id = "s2total">Total</p>
<br>
<p id="totalnum2">4.35</p>
</tr>
</table>
</div>
</body>
</html>
css:
#printPage
{
margin: 0px;
padding: 0px;
width: 670px;
height: 70px;
clear: both;
page-break-after: always;
}
#title
{
margin-bottom: 0%;
}
#name
{
margin-top: 0%;
}
#signature
{
float: right;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 0%;
}
#authorize
{
float: right;
margin-right: 9%;
margin-top: 1%;
margin-bottom: 0%;
}
#signBox
{
float: right;
margin-left: 2%;
}
#authBox
{
float: right;
}
#section1
{
margin: 0px;
padding: 0px;
border: 1.5px solid black;
width: 670px;
height: 114px;
clear: both;
page-break-after: always;
}
#header
{
margin-left: 0.5%;
font-weight: bold;
}
table
{
font-family: arial, sans-serif;
width: 75%;
}
th
{
text-align: left;
font-size: 8pt;
}
td
{
text-align: left;
padding: 5px;
font-size: 8pt;
}
#data1
{
background-color: white;
}
#s1total
{
float: right;
font-weight: bold;
margin-right: 2%;
font-size: 11pt;
}
#totalnum
{
float: right;
font-weight: bold;
font-size: 12pt;
}
#section2
{
margin: 0px;
padding: 0px;
border: 1.5px solid black;
width: 670px;
height: 1140px;
clear: both;
page-break-after: always;
}
#header2
{
margin-left: 0.5%;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#s2total
{
float: right;
font-weight: bold;
margin-right: 2%;
font-size: 11pt;
}
#totalnum2
{
float: right;
font-weight: bold;
font-size: 12pt;
}