html - CSS multi-column for tables -

i have slender long table row each day in month. it's long people have scroll on screen resolutions see bottom. since there enough space on right of table, i'd split table automatically multiple columns; each column taking of table rows.

css multi columns seem ideal solution task, column-width not work tables:

applies to: non-replaced block-level elements (except table elements), table cells, , inline-block elements

what can use instead? (i not care ie)

as mentioned can use css multi columns, wrap table class "treecolumn" , use csses on class example table have 3 columns :

.treecolumn{   -webkit-column-count: 3; /* chrome, safari, opera */   -moz-column-count: 3; /* firefox */   column-count: 3; } 

note internet explorer 9, , earlier versions, not support column-count property. here plunker

update : if want have headers in columns, don't know if safe way or not, can have table, in wrapper same class,and repeat headers as column count. in example have 3 columns add html above table plunker :

<div class="treecolumn">   <table>     <tr>        <th>first</th>        <th>second</th>     </tr>     <tr>        <th>first</th>        <th>second</th>     </tr>     <tr>        <th>first</th>        <th>second</th>     </tr>  </table>  </div> 

and add these css align 2 table columns :

table td,table th{   width: 60px;   text-align: center; }