Hi,
I have a long list that I want to display, but since each list item is short, I want to organize data into columns and display 2-3 on one page.

For example
XML:
<list1>
<name>Data Name</name>
<data>data here1</data>
<data>data here2</data>
<data>data here3</data>
<data>data here4</data>
<data>data here5</data>
<data>data here6</data>
<data>data here7</data>
<data>data here8</data>
<data>data here9</data>
<data>data here10</data>
</list1>

PDF:

Data Name

data here1 | data here5 | data here9
data here2 | data here6 | data here10
data here3 | data here7 |
data here4 | data here 8 |


Thanks for your help!

This will be easier to do if you can group the <data> elements within a single element that is separate from the <name> element, then apply "columns: 3" to that grouping element.

Thanks, "columns: 3" was what I was looking for.

I also see references to "column-count: 3" what is the difference?

Also, how would I get a custom header to appear on top of all the columns on each page?


Thanks!

The columns property is a shorthand for specifying either column-count or column-width. The former specifies the number of columns, with their width determined automatically, while the latter specifies the width of columns, with their number determined automatically.

You can place a header at the top of every page using running page headers:

@page {
    @top { content: "This is a header" }
}

Alternatively, you can place your content in a table and use the <thead> element:

<table>
<thead><tr><td>This is the table header</td></tr></thead>
<tbody><tr><td>This is the table body</td></tr></tbody>
</table>

The table header will be repeated at the top of every page that the table appears on.