Looking for Table Dimensions for A4 Print
I am trying to create a table with specific dimensions for A4 print. The requirements are as follows:
- The first and last rows of the table must have a margin of 11 mm from the top and bottom edges of the paper
- There should be no margin between the rows
- The rows of the table must be positioned 4 mm from the left and right sides of the paper
- There should be a 2 mm gap between every column
- Each cell in the table should have a width of 38 mm and height of 21.2 mm
- The table should have 13 rows and 5 columns, totaling 65 cells
Here is a JSFiddle link: http://jsfiddle.net/tt13/ZjBrV/
Question
What steps can I take to achieve the table layout described above?
Detailed
The HTML table structure I am using is shown below:
<body>
<table>
<td>
<div class="bcell">
sample text2<br/>
<img src="..."/><br/>
sample text2
</div>
</td>
....
</table>
</body>
Despite using the following CSS to achieve the desired A4 print dimensions, the result is not as expected:
body {
padding:11mm 4mm 0 4mm;
background: white;
font-family: Arial;
width: 210mm;
font-size:3mm;
}
table {
page-break-after:always;
width: 100%;
height: 275mm;
margin:0 auto;
page-break-inside:avoid;
border-collapse: collapse;
}
td img {
height:10mm;
}
td {
width: 38mm;
height:21.2mm;
padding: 0 1mm 0 1mm;
font-style: bold;
text-align: center;
vertical-align:middle;
}
tr {
page-break-after:auto;
page-break-inside:avoid;
height:21.2mm;
margin:0;
padding:0;
page-break-inside:avoid;
}