如何在纸上以多列呈现 HTML 表格？

【问题标题】：How to present a HTML table in multiple columns on paper?如何在纸上以多列呈现 HTML 表格？
【发布时间】：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，......但在深入了解这些细节之前，我想对此提出一些建议......
重要的是要知道我的唯一目的是将其打印在纸上（屏幕上不需要交互） 那么请问我从哪里开始呢？
任何帮助表示赞赏。

【问题讨论】：

    标签： html css flexbox css-selectors grid


    【解决方案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 行吗？或者是否有“溢出”到下一列的设置？
    猜你喜欢
    • 1970-01-01
    • 2010-10-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-13
    • 2017-03-09
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode