如何在纸上多列显示HTML表



我有一个简单的问题,但我不知道从哪里开始寻找解决方案。。。假设我有一个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行的列中,在1页上打印3列。我想找到一个解决方案,使用CSS,所以我保留了所有的灵活性,以防我需要更改这些设置(即在A5、横向、4列而不是3列上打印…(我的问题是:什么是最简单的方法,我需要使用哪些技术。我已经看了CSS flexbox,网格,第N个孩子。。。但在我深入探讨这些细节之前,我想对此提出一些建议
重要的是要知道,我的唯一目的是将其打印在纸上(屏幕上不需要交互(请问我从哪里开始
感谢您的帮助。

使用以下样式:

@媒体打印{.报纸{列数: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>

一种可能性是将表格布局分解为网格和灵活布局:

示例(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>

通过grid&柔性

/* 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>