我使用以下样式打印我的9 × 9 HTML表格:
td {
border: 2px solid;
}
@media print {
body {
margin: 0;
padding: 0;
}
table {
height: 100vh;
width: 100vw;
}
td {
margin: 20px;
width: 33.3%;
height: 33.3%;
}
}
它可以工作，但我希望我的单元格具有矩形形状。我怎样才能做到这一点呢?
你可以这样做:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}<!DOCTYPE html>
<html>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</table>
</body>
</html>您可以通过对宽度和高度使用绝对值来实现这一点。此外，您必须使用绝对宽度和高度的表。
td {
border: 2px solid;
}
body {
margin: 0;
padding: 0;
}
xtable {
height: 100vh;
width: 100vw;
}
td {
margin: 20px;
width: 200px;
height: 200px;
}<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</table>