打印3 x 3 html表格，其中所有9个单元格都具有相同的大小，并完全填充A4页面，无边距

Question

我想创建一个html页面，该页面由一个包含3列3行的表组成。当将此表打印到A4页面(纵向(时，所有9个单元格的高度和宽度应完全相同，并且应占据整个A4页面，没有任何边距。此外，每个单元格都应该有一个边框(1px(。

您可以使用下表来演示解决方案。请注意，实际的表格单元格将更加复杂，因为它们本身将包含图像、带圆角边框的文本等。。。但我不认为这会影响这个问题的解决方案。

<table id="countries">
<tr>
<td>Spain</td>
<td>Germany</td>
<td>Italy</td>
</tr>
<tr>
<td>Belgium</td>
<td>South Africa</td>
<td>UK</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco  <br>
laboris nisi ut aliquip ex ea commodo consequat.  <br>
Duis aute irure dolor in reprehenderit in voluptate velit  <br>
esse cillum dolore eu fugiat nulla pariatur.  <br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt  <br>
mollit anim id est laborum.</td>
<td>Netherlands</td>
<td>Russia</td>
</tr>
</table>

Answer 1

使用此打印查询。

table {
border-collapse: collapse;
}
td {
border: 1px solid;
}
@media print {
body {
margin: 0;
padding: 0;
}
table {
height: 100vh;
width: 100vw;
}
td {
width: 33.3%;
height: 33.3%;
}
}

<table id="countries">
<tr>
<td>Spain</td>
<td>Germany</td>
<td>Italy</td>
</tr>
<tr>
<td>Belgium</td>
<td>South Africa</td>
<td>UK</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco <br> laboris nisi ut aliquip ex ea commodo consequat.
<br> Duis aute irure dolor in reprehenderit in voluptate velit <br> esse cillum dolore eu fugiat nulla pariatur. <br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt <br> mollit anim id est laborum.</td>
<td>Netherlands</td>
<td>Russia</td>
</tr>
</table>

Answer 2

更新：使用表可能无法实现这一点。但是，您可以使用flex:这样做

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
html,
.table {
height: 100%;
}
.table {
display: flex;
flex-wrap: wrap;
}
.table,
.cell {
border: 0.5px solid;
}
.cell {
height: 33.33%;
width: 33.33%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

<div class="table">
<div class="cell">Spain</div>
<div class="cell">Germany</div>
<div class="cell">Italy</div>
<div class="cell">Belgium</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco <br> laboris nisi ut aliquip ex ea commodo consequat.
<br> Duis aute irure dolor in reprehenderit in voluptate velit <br> esse cillum dolore eu fugiat nulla pariatur. <br> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
</div>
<div class="cell">South Africa</div>
<div class="cell">UK</div>
<div class="cell">Netherlands</div>
<div class="cell">Russia</div>
</div>