需要压缩一下,以便在打印时都可以装在一张8.5x11的纸上。 (html)单张纸

时间:2018-10-16 13:50:06

标签: html css format

现在它正在约4页上进行打印,我需要将它们全部打印在一页上,但我看不到问题,我认为是由空白引起的。当我进行打印预览时,我的div彼此相距很远。只需要将它们全部放在一页上谢谢。是否有一种简单的方法来压缩它而不弄乱我的其余格式,使它们都可以平齐地放在一张标准纸上?我也希望Total和数字“ 4.35”在行的右下角是偶数

以下是代码段:

#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: 1030px; 
clear: both;
page-break-after: always;

}
#header2
{
margin-left: 0.5%;
font-weight: bold;
margin-bottom: 0px;
}
tr:nth-child(even) {
background-color: #dddddd;
}

#s2total
{
float: right;
font-weight: bold;
margin-right: 2%; 
margin-top: 0px;
font-size: 11pt;

}
#totalnum2
{
float: right;
font-weight: bold;
font-size: 12pt;

}
<!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>

0 个答案:

没有答案