CSS multi-column for tables

Question

I have a slender but long table with a row for each day in a month. It's so long that people have to scroll on most screen resolutions to see the bottom. Since there is enough space on the right of the table, I'd like to split the table automatically into multiple columns; each column taking only some of the table rows.

CSS multi columns seem like the ideal solution for this task, but column-width does not work for tables:

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

What can I use instead? (I do not care about IE)

Shirin Abdolahi · Accepted Answer · 2015-08-03 09:04:36Z

6

As you mentioned you can use CSS multi columns, wrap your table with some class like "treecolumn" and use this CSSes on that class for example you what your table to have 3 columns :

.treecolumn{
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

note that Internet Explorer 9, and earlier versions, does not support the column-count property. here is a plunker

UPDATE : If you want to have headers in your columns, I don't know if it is a safe way or not, but you can have another table, in another wrapper but with the same class,and repeat your headers as much as your column count. in this example I have 3 columns so I add this to my html above my 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 I add these CSS to align two table columns :

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

edited Aug 3, 2015 at 9:04

answered Aug 3, 2015 at 8:22

Shirin Abdolahi

1,0678 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cweiske Over a year ago

Table header does not get repeated, but I can live with that for now.

cweiske Over a year ago

That'd require me to know the column count beforehand, which I don't.

GSerg Over a year ago

Does not work in Firefox 68. Does work in Chrome 75.

Aner Over a year ago

Firefox bug for tables not breaking when inside css-multicol: bugzilla.mozilla.org/show_bug.cgi?id=888257

Rotan075 · Accepted Answer · 2015-08-03 09:20:47Z

-1

You can also do this by using a jQuery approach which will run in every browser:

$.fn.extend({
    multipleColumns: function(numCols) {
        var listTableRows = $('.multi').find('tbody tr');
        var numlistTableRows = listTableRows.length;        
        var numItemsPerCol = Math.ceil(numlistTableRows / numCols);
        var currentColNum = 1,
            currentRowNumber = 1,
            returnHtml = '',
            i = 0;

        for (i = 1; i <= numCols; i++) {
            $('.multi').parent().append('<table class="column table-column-' + i + '"><thead><th>test</th></thead></table>');
        }

        $.each(listTableRows, function(i, v) {
            if (currentRowNumber <= numItemsPerCol) {                
                currentRowNumber++;                
            } else {
                currentRowNumber = 1
                currentColNum++;
            }
            $('.table-column-' + currentColNum).append(v);
        });
        $('.multi').remove(); /*clean previous content */

    }
});

$('.multi').multipleColumns(2);

USAGE:

$('.multi').multipleColumns(2); // Change the number to the amount of columns you want

CSS:

.column { float:left; } // is needed to float the columns next to eachother

Demo here: JSFIDDLE

answered Aug 3, 2015 at 9:20

Rotan075

2,6155 gold badges37 silver badges56 bronze badges

2 Comments

cweiske Over a year ago

A css-only approach is much easier, faster and less error-prone than loading jQuery when I don't need it.

Rotan075 Over a year ago

True, but CSS-only approach is not a solution to multibrowsers. Like @shirin told. It will only cover ie10+ so if that is fine with you and you do not need to worry about ie9 and older browsers then a css-only solution will do the trick.

Collectives™ on Stack Overflow

CSS multi-column for tables

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related