необходимо сжать это, чтобы все это помещалось на одном листе бумаги размером 8,5х11 при печати.(HTML) один лист бумаги - PullRequest
0 голосов
/ 16 октября 2018

Сейчас он печатает на ~ 4 страницах, мне нужно, чтобы все это печаталось на одной странице, и я не вижу проблемы, я предполагаю, что это вызвано полями.Когда я отправляюсь на предварительный просмотр, мои дивы находятся далеко друг от друга.Просто нужно, чтобы все было на одной странице Спасибо.Есть ли простой способ сжать это, не мешая остальной части моего форматирования, чтобы все это помещалось на одном стандартном листе бумаги?Я также хотел бы, чтобы 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...