Для простоты я сохранил только соответствующую часть.
Во-первых, как уже было сказано, id уникальны.Не устанавливайте один и тот же идентификатор для более чем одного элемента.Персонально, я избегаю злоупотреблять ими (только если мне нужно ссылаться на них непосредственно в манипуляциях с DOM или дизайне CSS).
Также старайтесь избегать дублирования правил CSS, если некоторые элементы имеют общий дизайн, разумно перегруппируйте их правила,Простое обслуживание - это краткосрочная и долгосрочная цель.
Наконец, как вы можете видеть, в приведенном ниже фрагменте кода я использовал семантический идентификатор и имена классов, чтобы иметь возможность выяснить, что разрабатывает, что будет дальше.
#printPage {
margin: 0px;
padding: 0px;
width: 910px;
height: 40px;
margin-bottom: 0.4%;
font-family: arial, sans-serif;
}
div#section-example {
margin-top: 0.5%;
padding: 0px;
border: 1.5px solid black;
width: 670px;
height: 925px;
}
div#section-example header {
margin-left: 0.5%;
font-weight: bold;
margin-bottom: 0px;
}
table.example {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 0%;
margin-top: 0.3%;
}
table.example th,
table.example td {
vertical-align:top;
text-align: left;
font-size: 8pt;
/* The following rule (white-space) is used to allow the last cell */
/* to fill the remaining width. */
/* see https://stackoverflow.com/a/1060967/4375327 */
white-space: nowrap;
}
table.example th {
/* padding to keep THs right aligned with TDs */
padding: 0 5px 0 5px;
}
table.example td {
padding: 5px;
}
table.example tr.last-row th,
table.example tr.last-row td {
background-color: #eeeeee;
}
table.example tr.last-row th.total,
table.example tr.last-row td.total {
/* The following rule (width) is used to allow the last cell to fill */
/* the remaining width. */
/* see https://stackoverflow.com/a/1060967/4375327 */
width: 99%;
text-align: right;
}
<div id="printPage">
<div id="section-example">
<header>WED 10/3/2018</header>
<table class="example">
<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>9:00 AM</td>
<td>8:52 AM</td>
<td>-</td>
<td>11:30 AM- <br>12:00 PM</td>
<td>-</td>
<td>0.5</td>
<td>4.85</td>
<td>4.35</td>
</tr>
<tr class="last-row">
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th colspan=4>Off-Clock</th>
<th class="total">Total</th>
</tr>
<tr class="last-row">
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td colspan=4>0.00</td>
<td class="total">4.35</td>
</tr>
</table>
</div>