Can anyone explain why when printing from IE10, the borders in the following HTML table will not be displayed on the print-out?
Even if you don't have an answer, has anyone else noticed this behavior?
I've been printing to Microsoft XPS Viewer, but it also does not display when printing to a printer.
Here's a similar IE10 print issue, but it's not quite the problem I'm experiencing:
IE 10 Missing border segments while printing table elements
<!DOCTYPE html>
<html>
<head>
<title>Broken IE10 Print Page</title>
<style>
table {
border: 3px solid black;
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
th {
padding: 2px;
border: 1px solid black;
}
td {
padding: 2px;
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width: 975px;">
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test3</th>
<th>Test4</th>
<th>Test5</th>
<th>Test6</th>
<th>Test7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">
Broken in Print
</td>
<td>Material</td>
<td>Material</td>
<td>0.10000</td>
<td></td>
<td></td>
<td>Rowspan 2</td>
</tr>
<tr>
<td>Material</td>
<td>Supplies</td>
<td>0.20000</td>
<td>0.1</td>
<td></td>
<td>Manual</td>
</tr>
<tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr><tr>
<td>Test123</td>
<td></td>
<td></td>
<td>0.00000</td>
<td>0</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Try going to IE > Tools [alt+x] > print > page setup. In the upper left corner, you should see Paper Options. Under that, there is a checkbox titled Print Background Colors and Images. Try printing after enabling that.
Despite Microsoft's response, I'm still seeing this problem in IE 11 when
my document goes over one page. But I have found a hacky work around.
Remove the rowspan, and any cell that should have had a row span can
now have its contents in a span with position: absolute;. Then it's
just a matter of using css to remove what shouldn't be there. If you
can also use table { border-collapse: collapse; }, you can't even
see the break. Here's a complete example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IE11 Table</title>
<style type="text/css">
td {
border: 1px solid black;
padding: 3ex;
}
td.rowspan {
border-bottom: 0 solid transparent;
}
td.rowspan span {
position: absolute;
margin-top: -1.5ex;
}
td.rowspanned {
border-top: 0 solid transparent;
color: transparent;
background-color: transparent;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
<tr><td class="rowspan"><span>F1<br>F1A<br>F1B<br>F1C<br>F1D</span></td><td>F2</td></tr>
<tr><td class="rowspanned">G1</td><td>G2</td></tr>
<tr><td>H1</td><td>H2</td></tr>
<tr><td>I1</td><td>I2</td></tr>
<tr><td>J1</td><td>J2</td></tr>
<tr><td>K1</td><td>K2</td></tr>
<tr><td>L1</td><td>L2</td></tr>
<tr><td>M1</td><td>M2</td></tr>
<tr><td>N1</td><td>N2</td></tr>
<tr><td>O1</td><td>O2</td></tr>
<tr><td>P1</td><td>P2</td></tr>
<tr><td>Q1</td><td>Q2</td></tr>
</tbody>
</table>
</body>
</html>
td {
border: 1px solid black;
padding: 3ex;
}
td.rowspan {
border-bottom: 0 solid transparent;
}
td.rowspan span {
position: absolute;
margin-top: -1.5ex;
}
td.rowspanned {
border-top: 0 solid transparent;
color: transparent;
background-color: transparent;
}
<table>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
<tr><td class="rowspan"><span>F1<br>F1A<br>F1B<br>F1C<br>F1D</span></td><td>F2</td></tr>
<tr><td class="rowspanned">G1</td><td>G2</td></tr>
<tr><td>H1</td><td>H2</td></tr>
<tr><td>I1</td><td>I2</td></tr>
<tr><td>J1</td><td>J2</td></tr>
<tr><td>K1</td><td>K2</td></tr>
<tr><td>L1</td><td>L2</td></tr>
<tr><td>M1</td><td>M2</td></tr>
<tr><td>N1</td><td>N2</td></tr>
<tr><td>O1</td><td>O2</td></tr>
<tr><td>P1</td><td>P2</td></tr>
<tr><td>Q1</td><td>Q2</td></tr>
</tbody>
</table>
Related
I want my table to be like that :
wanted table
Mine, is currently like that :
current table
The difference is that in the wanted table, the first cell (at position 0;0) is removed.
I also want to border to be updated, in order to make it goes through the bottom and the right of the removed cell.
The current result is that :current result
here is my current code :
table, th, td {
border: 0.5px solid black;
border-collapse: collapse;
}
.removeCell {
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<link rel="stylesheet" href="css\desktopStyle.scss">
</head>
<body>
<table>
<tr>
<th class="removeCell">Mois</th>
<th>Data</th>
</tr>
<tr>
<td>Janvier</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Février</td>
<td>10.01.2014</td>
</tr>
</table>
just remove the border on the first td
td{
border: 1px solid black;
width:40px;
height:10px;
}
table{
border-collapse:collapse;
}
#one{
border:none;
}
<table>
<tr>
<td id='one'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I have following code -
Intention is to get fixed headers of table with scrollable tobody.
If I use height of tbody in pixels or in vh it works in chrome, firefox, or in microsoft browsers.
but if I use % height for tbody - it works only in chrome.
Anyone has any idea how to get it working in Firefox or Edge ?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.tableWrapper{
width:80%;
height:80vh;
border:1px solid red;
}
table{
border-collapse: collapse;
border:1px solid blue;
height:100%;
position:relative;
table-layout: fixed;
}
thead,tbody{
display:block;
}
td,th{
border:1px solid blue;
width:70px;
height:20px;
}
tbody{
height:30vh;
border:2px solid yellow;
overflow-y: auto;
}
</style>
</head>
<body>
<h1>Table</h1>
<div class="tableWrapper">
<table>
<thead>
<tr>
<th><br>sr no</th>
<th>First Name</th>
<th>Middle Name</th>
<th>last Name</th>
<th>Address</th>
<th>Age</th>
<th><br>Sex<br></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</body>
</html>
Why does it add a space to the right side inside the first cell? How can I remove it? I included an image of the results. It's supposed to be the american flag, but I just cant get the space in the first cell to go away. I'm new to coding I just need to make an american flag out of a table as a class project.
<!DOCTYPE html>
<html>
<head>
<title>Flag2</title>
<style type="text/css">
table,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width="300px;">
<tr>
<td>
<table>
<tr>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*
</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
</tr>
<tr>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
</tr>
<tr>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*
</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
</tr>
<tr>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
</tr>
<tr>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*
</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
</tr>
<tr>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
</tr>
<tr>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*
</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
</tr>
<tr>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
</tr>
<tr>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
<td></td>
<td>*
</td>
<td></td>
<td>*</td>
<td></td>
<td>*</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
You want to collapse the border
table {
border-collapse: collapse;
}
I have here 2 photos. 1 is my HTML page and the other one is my print page.
My question is, how am I going to make my print page the same as my html page? As you can see, the print page is less wide than the HTML page.
Also, I want to ask how am I going to make the width of <th> longer without affecting the width of <td>? Is that possible?
Sorry, I don't have that much knowledge in CSS.
Print Page
HTML Page
and here is my code:
<table width="100%" border="1">
<tr>
<th align="left" width="20%">II. Documentation</th>
</tr>
<tr>
<td align="center">Subject Routine</td>
<td width="20%" align="center">Person-in-charge</td>
<td width="15%" align="center">Complied</td>
<td width="10%" align="center">Date</td>
<td width="17%" align="center">Remarks</td>
<td align="center">Signature</td>
</tr>
<tr>
<td>1. Travel Documents</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2. National License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3. NAC Certificates/MARINA COP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4. Medical</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5. POEA / AMOSUP Contracts</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6. Flag License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7. US Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8. Joining Port Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9. Other Certificate</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
To get a nice print page width use media queries for example:
#media print {
#page {
margin: 30mm;
size:297mm 210mm;
}
}
Or use diffent stylesheets with different widths in stead of the same 100%
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
And in the style.css add:
table {width:100%}
And in style_print.css add:
table {width:297mm}
Play with the widths untill you are happy in both ;)
Here are some great posts on how to set up CSS for printing:
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
Just add colspan="6" to your th to set the correct width of your first cell.
<table width="100%" border="1">
<tr>
<th colspan="6" align="left" width="20%">II. Documentation</th>
</tr>
<tr>
<td align="center">Subject Routine</td>
<td width="20%" align="center">Person-in-charge</td>
<td width="15%" align="center">Complied</td>
<td width="10%" align="center">Date</td>
<td width="17%" align="center">Remarks</td>
<td align="center">Signature</td>
</tr>
<tr>
<td>1. Travel Documents</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2. National License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3. NAC Certificates/MARINA COP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4. Medical</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5. POEA / AMOSUP Contracts</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6. Flag License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7. US Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8. Joining Port Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9. Other Certificate</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Tip: When I don't know what my html elements are doing I give them a border so I can see how they are behaving. In this case you don't have the same amount of <th> cells as <td> cells - just add a colspan=6 ( the same number of cells you have ) and your <th> cell will span across the whole table:
<tr>
<th colspan="6" align="left">II. Documentation</th>
</tr>
also you don't require the width unless you are trying to wrap the text ( but it sounds like you aren't. ) ...
oh, nevermind... answered above
I am having a bit of trouble making a class schedule in HTML coding, I got to have the times like: 1:00, 1:30 etc. on the left and in the main body having rowspans for the different classes on the different days.
An example would be I have the same classes on monday and wednesday but no classes on tuesday thursday friday saturday or sunday.
In my efforts so far I am able to span the rows but unfortunately get extra columns at the end.
<table border="1">
<tr>
<th>TIME</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<th>8:00AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>8:30AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:00AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:30AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>10:00AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>10:30</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>11:00AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>11:30AM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>12:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>12:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>1:00PM</th>
<td rowspan="6">FA 3550 - 001</td>
<td></td>
<td rowspan="6">FA 3550 - 001</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>1:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>3:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>4:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>5:00PM</th>
<td rowspan="3">class</td>
<td></td>
<td rowspan ="3">class</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>5:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>6:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>6:30PM</th>
<td></td>
<td></td>
<td rowspan="5">class</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>7:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>7:30PM</th>
<td rowspan="6">class</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>8:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>8:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:00PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>9:30PM</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here is an example of your problem.. notice how in one of the rows, I filled in the letter "d" for each cell for that row:
http://jsfiddle.net/57FLP/
<tr>
<th>1:00PM</th>
<td rowspan="6">FA 3550 - 001</td>
<td></td>
<td rowspan="6">FA 3550 - 001</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>1:30PM</th>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
</tr>
Looking at the html code, the letter 'd' for each <td></td>, which happens to be 7 times; your table also shows it 7 times; however because you are doing a rowspan, from one of your rows somewhere in the middle, you're cutting into the rows below it. Don't think of your row span as a knife cutting through butter, think of it as your hand chopping down on a bunch of apples (not cutting through them, but moving them, the apple will then fill up the sides as it has no where else to go); this is analogous as to what is happening with you table.
Just think about what happens if all your <td></td> are filled with data, and you just happen to convert one as a rowspan, where would all that data go? You don't want to lose any of it.
What you need to do, is for every change you make, you have to cut off the remaining unused tds from your table.