如何在纸上以多列呈现 HTML 表格？
Posted
技术标签:
【中文标题】如何在纸上以多列呈现 HTML 表格？【英文标题】：How to present a HTML table in multiple columns on paper? 【发布时间】：2021-09-06 09:01:29 【问题描述】：我有一个简单的问题，但我不知道从哪里开始寻找解决方案... 假设我有一个 html 格式的大型数据表（超过 300 行），结构非常简单，我将这个问题变得更简单。
<table>
<tr><td>1</td><td>AA</td><td>solved</td></tr>
<tr><td>2</td><td>AB</td><td>closed</td></tr>
<tr><td>3</td><td>AC</td><td>new</td></tr>
<tr><td>4</td><td>AD</td><td>solved</td></tr>
....
<tr><td>300</td><td>ZZ</td><td>new</td></tr>
<table>
当我在纸上打印时，这会占用太多页面，留下很多未使用的“空白”。所以我想将这些表格分成 3 列，每列正好包含 45 条记录。 所以第一列包含第 1 行到第 45 行， 第 2 列包含第 46 到 90 行和 第 3 列包含第 91 到 135 行 然后，此过程在第 2 页上继续，以此类推，直到所有记录都打印在每列 45 行、一页上 3 列的列中。 我想找到一个解决方案，使用 CSS，所以我保留了所有的灵活性，以防我需要更改这些设置（即在 A5、横向、4 列而不是 3 列上打印，. ..) 我的问题是：最简单的方法是什么，我需要使用哪些技术。我已经看过 CSS flexbox、grid、Nth-children，......但在深入了解这些细节之前，我想对此提出一些建议...... 重要的是要知道我的唯一目的是将其打印在纸上（屏幕上不需要交互） 那么请问我从哪里开始呢？ 任何帮助表示赞赏。
【问题讨论】：
【参考方案1】：使用以下样式：
@media print .newspaper column-count: 3;JSFiddel 链接： https://jsfiddle.net/rsanimesh/Lo8up7cx/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media print
.newspaper
column-count: 3;
</style>
<body>
<div class="newspaper">
<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>6</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>7</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>8</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>9</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>10</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>11</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>12</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>13</td>
<td>ZZ</td>
<td>new</td>
</tr>
<tr>
<td>14</td>
<td>ZZ</td>
<td>new</td>
</tr>
<tr>
<td>15</td>
<td>ZZ</td>
<td>new</td>
</tr>
</table>
</div>
</body>
</html>
【讨论】：
firefox 对此有疑问 ;) 感谢您提出这个想法。不幸的是，这似乎不起作用（Mac OS X 和 Safari）；我仍然得到 1 列... 问题还在于，在第二个物理页面上，我也需要有 3 列，包含下一组 135 条记录（3x 45）。【参考方案2】：一种可能是将表格布局分解为网格和弹性布局：
示例（45 列似乎有点太多了，很多，不是吗？）：误读了问题，请参阅下面的其他选项
/* media commented fo visual test */
/* @media print */
table
display: block;
tbody
display: grid;
grid-template-columns: repeat(15, 1fr);
/* is this not too much 3 x 15 = 45 columns!! */
tr
display: flex;
tr :first-child
font-weight: bold;
color:blue
td
border: solid 1px;
flex: 1;
margin: 1px;
/* */<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
...
<table>通过网格和弹性的其他选项
/* media commented fo visual test */
/* @media print */
table
display: block;
tbody
display: grid;
grid-template-rows: repeat(45, auto);
grid-auto-flow: column dense;
tr
display: flex;
tr :first-child
font-weight: bold;
color:blue
td
border: solid 1px;
flex: 1;
margin: 1px;
/* */<table>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<table>或
/* media commented fo visual test */
/* @media print */
table
display: block;
tbody
display: grid;
grid-template-rows: repeat(45, auto);
grid-auto-flow: column dense;
tr
display: contents;
td
border: solid 1px;
margin: 1px;
tr :first-child
font-weight: bold;
color:blue;
flex-shrink:1;
tr:nth-child(odd) td background:lightgray;
/* */<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<table>将表格分解为 3 列 trs 的网格的示例：
/* media commented fo visual test */
/* @media print */
table
display: block;
tbody
display: grid;
grid-template-columns: repeat(3, auto);
tr
display: flex;
tr :first-child
font-weight: bold;
color:blue
td
border: solid 1px;
flex: 1;
margin: 1px;
/* */<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<table>tr 也可以是单独的内联框并排设置，内容按列或行绘制。
/* media commented fo visual test */
/* @media print */
table
display: block;
text-align:center;
tbody
display:contents;
tr
display: inline-flex;
flex-direction:column;
width:12%;
text-align:initial;
tr :first-child
font-weight: bold;
color:blue
td
border: solid 1px;
flex: 1;
margin: 1px;
/* */<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<table>/* media commented fo visual test */
/* @media print */
table
display: block;
text-align:center;
tbody
display:contents;
tr
display: inline-flex;
width:30%;
text-align:initial;
tr :first-child
font-weight: bold;
color:blue
td
border: solid 1px;
flex: 1;
margin: 1px;
/* */<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<table>【讨论】：
确实，45列太多了，我一页只需要3列。当您的表中只有 135 行时，第一个解决方案似乎工作得很好。这就是我需要的！但是当你有超过 135 行时，比如 300 行，这似乎添加了第 4 列和第 5 列，依此类推。相反，它应该在第一列下创建第 4 列并用接下来的 45 行填充它，并且很快。第二种解决方案似乎是转置表格，这不是我想要的。 @WhiteSpirit 我确实设置了：grid-template-rows: repeat(45, auto); grid-auto-flow: column dense; 45 取自问题。要调整该数字，需要在服务器端计算 tr 或 javascript 以最终通过 css var() 重置该数字（45）。也会出现表格比A4纸长的情况。你有没有尝试调整任何东西？
@WhiteSpirit 添加了最后一个 sn-p 构建 3 列网格，每列包含 trs 本身由 3 列组成。它将被绘制并逐行扩展而不是列。但是，您需要重置显示来破坏 table-layout 。然后，按列或按行重新绘制/重新排序内容的选择取决于您希望它如何可读。按列绘制需要设置高度（或行数），因此它会包裹下一列，按行绘制，视口具有固定宽度，除非您需要更小，否则无需在此处重置。玩得开心编码:)
只是为了清楚。我的 300 多行列表当然跨越了多个物理页面。在第一页上，我有 3 个垂直列，每列包含 45 条记录，自上而下填充。第二列从第 46 行开始到 90。第三列从 91 到 135 开始。在第二页，同样是 3 列，第一列包含第 136 行到第 180 行，第二页第二列包含 181 到 225，然后... . 使用网格我可以在每一页上设计这些列。但是这些网格是如何自动填充的呢？如果第一个网格被 45 条记录填满，则应该溢出到下一个网格。
我的问题是这在纯 CSS 中是否可行？我可以在网格中定义第一列只需要包含第 1 到 45 行吗？或者是否有“溢出”到下一列的设置？以上是关于如何在纸上以多列呈现 HTML 表格？的主要内容，如果未能解决你的问题，请参考以下文章